Angular Directive dropdown box

Question

I am learning Angular JS and trying to create a dropdown box as a directive. I have done this simply (in my actual code I use a templateURL) but now I need to be able to read the attribute 'value' from the dropdown box and respond to the changes.

I can do this in Jquery and have written a small scrip to show the behaviour that I want to see. My question is how to replicate this behaviour just using Angular.

Here is the test script in Plunker: http://plnkr.co/edit/Vguftwf8zfY7ZeAoGYfq

It is also below:

<!DOCTYPE html>
<html ng-app="test">
<head>
    <title>This is a test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <div id="dd"><runs></runs></div>
<div id="other">Here is other input box
    <input type='text' name='other'/></div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js">     </script>
    <script>
        'use strict'
        var app = angular.module('test', [])
        app.directive('runs', function() {
            return{
                restrict: 'E',
                template: '<select name="runs" id="runs"><option value ="0">Zero</option><option value ="1">One</option><option value ="2">Two</option><option value ="other">Other</option></select>',
                scope: {
                    value: '@'
                },
                link: function(scope, element, attrs) {


                    //if (attrs('value') === 'other'){
                    //    set other div to visible
                    // }
                }
            }
        })

        $(document).ready(function(){
            $("#other").hide();
            $("#runs").change(function(){
                if($("#runs option:selected").val()==="other"){
                    $("#other").show();
                } else{
                    $("#other").hide();
                }

            })
        })

    </script>
</body>

charlietfl · Accepted Answer · 2013-12-30 00:05:56Z

1

First you want the <select> to be bound to a data model using ng-model.

When angular encounters ng-model in the html, if the scope that it is encountered within doesn't contain this variable, angular creates it.

<select ng-model="model.runs">

I arbitrarily named the object model and the property runs.

Now you can use ng-show to evaluate that value :

<div id="other" ng-show="model.runs=='other'">

Many of angular's built in directives will evaluate javascript expressions. In this case will evaluate model.runs=='other' as a boolean.

Note that changing the select will now toggle the display of an element without any additional script having been written, just a little bit of markup modification

DEMO

edited Dec 30, 2013 at 0:05

answered Dec 29, 2013 at 23:25

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nwilliams36 Over a year ago

Thanks I knew there was an easy way to do this but I couldn't work it out. By the way why is there a blank line now in the drop down box?

charlietfl Over a year ago

ahh...look at select docs...there is a nullable directive can apply . The blanks are done by angular since most select use ng-options to populate

Kazehaya · Accepted Answer · 2017-06-03 02:27:24Z

0

Here is a directive example, hope this will help you.

<kaze-dropdown is-button ng-model="item" items="options" callback="callbackFunc(item)"></kaze-dropdown>

JSFiddle

answered Jun 3, 2017 at 2:27

Kazehaya

315 bronze badges

Collectives™ on Stack Overflow

Angular Directive dropdown box

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related