Angularjs - динамические ng-опции

Для необходимости директивы, которую я пишу, мне нужно динамически построить выражение ng-options. Вот что я пробовал.

В моей директиве:

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

В моем html-шаблоне:

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

В результате ng-options принимают правильное выражение "l.name для l в списке", но параметры не отображаются.

Пожалуйста, любая идея?

ОТВЕТЫ

Ответ 1

Измените свой код так, чтобы он выглядел (используйте javascript, чтобы выбрать вашу собственность):

// ... 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>

Ответ 2

Я знаю, что это старый вопрос, но многие ответы на мои вызовы исходят из устаревших ответов на вопрос о Stackoverflow (так кто знает, поможет ли это кому-то помочь?), и мне потребовалось некоторое время, чтобы выяснить, как это сделать это. Я рассмотрел нижеследующее решение, рассмотрев концепцию "Cascading Dropdown Menus" - технический термин, который я узнал в этом поиске. Это может быть не самый лучший способ сделать это, но это было лучшее, что я мог бы придумать сейчас, и не видел такого примера в Интернете, который, как я думал, я бы разделил.

Я попробовал реализовать ng-options на основе выражения Andrew Church, но я обнаружил, что если вы сделаете это в выборе:

ng-options="{{ selectOptions }}"

Где позволяет выбрать selectOptions в вашем контроллере как:

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

а затем вы измените его позже в коде, скажем, по выбору пользователя в другом раскрывающемся меню:

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

Вы обнаружите, что если вы проверите элемент select в средстве разработчика браузера (или, посмотрев исходный код), что элемент выбора теперь действительно читается с помощью 'ng-options = "cat.name для cat в catList" ', но элемент не будет обновлен, чтобы показать новые параметры. То есть - Angular не перезапускает функцию ng-options при изменении.

Более динамичный способ выполнить это я обнаружил, что не было проблем с обновлением, вместо этого вместо него были не ng-options, а сами элементы параметров:

<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>

Таким образом вы можете установить ng-change в другое раскрывающееся меню, чтобы вызвать функцию, которая устанавливает selectOptions для продуктов/кошек/что вам нужно. Angular уже имеет встроенную функциональность, чтобы знать, чтобы скрыть/показать элемент option с помощью ng-if.