Angularjs - dynamic ng-options

Steph.D picture Steph.D · May 15, 2014 · Viewed 23.3k times · Source

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

Andrew Church picture Andrew Church · May 15, 2014

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>