AngularJS: Dropdown directive with custom ng-options

Question

I'm trying to create a dropdown directive where i want to specify the selects ng-options "option value" and "option description" attributes by specifying them with the directives attributes. See code for a better understanding...

Here is my directive. This will obviously not work, but i think it will describe what i'm trying to do...

app.directive('dropdown', function(){
return {
    restrict: 'E',
    scope: {
        array: '='
    },
    template:   '<label>{{label}}</label>' +
                '<select ng-model="ngModel" ng-options="a[{{optValue}}] as a[{{optDescription}}] for a in array">' +
                    '<option style="display: none" value="">-- {{title}} --</option>' +
                '</select>',
    link: function (scope, element, attrs) {
        scope.label = attrs.label;  
        scope.title = attrs.title;
        scope.optValue = attrs.optValue;
        scope.optDescription = attrs.Description;
    }
};

});

...and here is how i want to use it

<dropdown title="Choose ferry" label="Ferries" array="ferries" opt-value="Id" opt-description="Description"></dropdown>
<dropdown title="Choose route" label="Routes" array="routes"  opt-value="Code" opt-description="Name"></dropdown>

And the fiddle: http://jsfiddle.net/wXV6Z/1/

If you have a solution to this problem, or perhaps more likely, have a different opinion on how to tackle it, please let me know!

Thanks /Andreas

satchmorun · Accepted Answer · 2013-02-19 22:12:23Z

4

Actually, this can work. The only change you need to make is to remove the curly braces around a[{{optValue}}] and a[{{optDescription}}], as you don't need to interpolate there.

optValue and optDescription are already strings in scope, so a[optValue] and a[optDescription] will make your code work just fine, as they are expressions evaluated in your directive's scope.

Here's an updated version of your fiddle.

answered Feb 19, 2013 at 22:12

satchmorun

12.5k2 gold badges43 silver badges27 bronze badges

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

2 Comments

Ben Lesh Over a year ago

Good call. Since each part is being evaluated by Angular, it will be able to pull those values out of the $scope.

Fooberichu Over a year ago

This helped me resolve an issue I was having in my own custom directive doing something very similar to this. Thanks!

Collectives™ on Stack Overflow

AngularJS: Dropdown directive with custom ng-options

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related