ngOptions - Как выбрать элемент по его полю?

0

У меня есть множество элементов:

$scope.items = [{description: "Item One", id: 1}, 
                {description: "Item Two", id: 2},
                {description: "Item Three", id: 3}] 

Я хочу, чтобы пользователь мог выбрать item.description из выпадающего списка (ngOptions или typeahead), показать описание в раскрывающемся списке, но привязать идентификатор к модели. Я попробовал это (обратите внимание, это то же самое для ng-if):

typeahead="item.id as item.description for item in items"

Мне кажется, что в этом говорится: "Для каждого элемента в элементах выберите item.id, но покажите ему это как описание элемента". Это не работает, как только элемент выбран, раскрывающийся список /typeahead изменяется на item.id вместе с моделью: PLNKR. Как я могу это предотвратить? (Примечание. Идентификатор выбора модели - это желаемое поведение, поле ввода typeahead, изменяющееся на item.id/model, отсутствует. Я хотел бы, чтобы он оставался как item.description).

Окончательный учебник от OdeToCode не спас меня.

Теги:
angular-ui-bootstrap

1 ответ

1
Лучший ответ

ngOptions:

<pre>Model: {{selected | json}}</pre>    
<select ng-model="selected" ng-options="item.id as item.description for item in items |
         filter:$viewValue | limitTo:8" class="form-control">
</select>

http://plnkr.co/edit/nuWMSCND7U3sZoFDZ7Gh?p=preview

Тип:

<pre>Model: {{selected.id | json}}</pre>
<input type="text" ng-model="selected" typeahead="item as item.description for item in items |
filter:$viewValue | limitTo:8" class="form-control"/>

http://plnkr.co/edit/s1tJ8fwkqoJAIpXDeW2B?p=preview

  • 0
    Удалось ли вам заставить его работать в typeahead? Это моя главная забота. Я просто включил ngOptions, потому что это приложение синтаксиса, с которым знакомо большинство людей.
  • 0
    Я не понимаю, так как мне кажется, что он бы выделил весь объект предмета, но он работает, поэтому не могу пожаловаться. Спасибо. редактировать: О НМ, понял.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню