Angularjs - dynamic ng-options

Question

For the need of a directive i'm writing, i have to construct dynamically the ng-options expression. Here is what i tried.

In my directive:

// ... scope.labelProperty = 'name';
scope.selectOptions = "l." + scope.labelProperty + " for l in list";

In my html template:

<select class="form-control"
    ng-model="selected.available"
    ng-options="{{ selectOptions }}"
    multiple
    size="5"></select>

This results in ng-options taking the correct expression "l.name for l in list" but options dont display.

Please, any idea ?

Answer 1

Change your code to look like this (use javascript to pick your property):

// ... scope.labelProperty = 'name';
scope.selectOptions = "l[labelProperty] for l in list";

<select class="form-control"
    ng-model="selected.available"
    ng-options="{{ selectOptions }}"
    multiple
    size="5"></select>

Answer 2

I know this is an old question but many of the answers to my challenges come from outdated Stackoverflow question answers (so who knows if this will end up helping someone else!) and it took me a while to figure out how to do this. I came up with the below solution after looking into the concept of "Cascading Dropdown Menus" - a technical term I learned on this search. It may not be the best way of doing it but it was the best I could come up with for now and having not seen an example like it on the internet I thought I'd share.

I tried implementing Andrew Church's expression based ng-options but what I found was that if you do this in a select :

ng-options="{{ selectOptions }}"

Where lets say selectOptions is defined in your controller as:

$scope.selectOptions = "product.description for product in productList"

and then you change it later on in the code, lets say by a users choice on another dropdown menu to be:

$scope.selectOptions = "cat.name for cat in catList"

You will find if you inspect the select element in a browser developer tool (or by looking at the source code) that the select element does now in fact read with 'ng-options="cat.name for cat in catList"' but the element will not be refreshed to show the new options. That is - Angular does not rerun the ng-options function on change.

A more dynamic way to perform this I found that did not have any of the refresh problems was instead controlling not the ng-options but the option elements themselves like so:

<select class="form-control"
    ng-model="selected.available">
<option ng-if="selectOptions == 'products'" ng-repeat="product in productList" value="{{product}}">{{product.name}}</option>
<option ng-if="selectOptions == 'cats'" ng-repeat="cat in catList" value="{{cat}}">{{cat.name}}</option>
</select>

This way you can set an ng-change on another dropdown menu to call a function that sets selectOptions to either products/cats/whatever you need. Angular already has the built in functionality to know to hide/show the option element with the ng-if.