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.имя для l в списке", но параметры не отображаются.

пожалуйста, любые идеи ?

11
angularjs dynamic javascript ng-options select

2 ответов

измените свой код так (используйте 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>
10

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

Я попытался реализовать выражение Эндрю Черча на основе ng-опций, но я обнаружил, что если вы сделаете это в select:

ng-options="{{ selectOptions }}"

где допустим, выберитефункции определяется в контроллере так:

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

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

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

вы найдете, если вы проверите элемент select в a инструмент разработчика браузера (или, глядя на исходный код), который элемент select теперь фактически читает с помощью"ng-options=" 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 уже имеет встроенную функциональность, чтобы знать, чтобы скрыть / показать элемент опции с ng-if.

3