AngularJs ng-options получают идентификатор

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

<div class="form-group" ng-class="{ 'has-error' : saveForm.status.$invalid && !saveForm.status.$pristine }">
    <label class="control-label">Status</label>
    <select class="form-control" name="status" ng-options="status.name for status in controller.statuses.data track by status.id" ng-model="controller.model.data.statusId" required>
        <option value="">Select a status</option>
    </select>
</div>

ng-model была привязана к контроллеру.model.data.status, потому что в то время, когда мне нужен весь объект. Теперь мне нужен только выбранный идентификатор, поэтому я изменил ng-model на controller.model.data.statusId и, как вы ожидаете, весь объект статуса теперь привязан к этому местоположению модели. Как я могу заставить его просто выбрать идентификатор вместо всего объекта, показывая имена в элементе управления select?

пример codepen в соответствии с запросом:

http://codepen.io/r3plica/pen/yNgLqp

Ответы

Ответ 1

Я предпочитаю синтаксис select as из ng-options. (Это не работает с track by). В частности, мне нравится, что форма select as label for value in array, что позволяет вам изменить то, что на самом деле является привязкой (select) от отображаемого (label).

Из документации синтаксис состоит из 4 частей:

  • select это выражение, на которое вы действительно хотите привязать. Часто это свойство элемента в массиве. В вашем случае это status.id
  • label - это выражение, определяющее, как отображать объект в раскрывающемся списке. Опять же, это часто свойство, но на самом деле это может быть любое угловое выражение (например, status.name + ': ' + status.description). В status.name это просто status.name
  • value - это имя (псевдоним), которое вы хотите использовать для одного элемента массива. В вашем status но это просто имя, поэтому вы можете изменить его на что угодно (вам тоже нужно будет изменить select и label).
  • array - это, очевидно, массив, который вы хотите использовать в качестве выпадающего источника данных. В вашем - это controller.statuses.

В вашем полностью собранном коде:

ng-options="status.id as status.name for status in controller.statuses"