Как установить значение для модели в AngularJS, используя select с массивом объектов

Question

Я новичок в AngularJS и пытаюсь решить одну проблему самым элегантным способом.

У меня есть список, который приходит с сервера и используется в качестве источника для select тега optionв моем приложении. Предположим, что это список авторов, который выглядит так:

[
  { id: 1, name: 'Mark Twain' },
  { id: 2, name: 'Jack London' },
  { id: 3, name: 'Ernest Hemingway' }
]

Также у меня есть модель книги, которая приходит и сохраняется на сервере. Одно из свойств книги author который может быть выбран пользователем из select падать. Когда модель книги сохраняется или загружается с сервера, она author поле представляется как целое число Вот пример того, как модель книги должна быть сохранена на сервере и как она выглядит при получении:

{
  id: 324,
  title: 'Martin Eden',
  author: 2
}

книга представлена ​​как ангулярная $resource в моем приложении, поэтому всякий раз, когда я хочу сохранить модель книги, я просто вызываю это метод сохранения.

Для реализации этой логики я попытался использовать select с ng-options директива, вот так:

<select ng-options="author as author.name for author in authors track by author.id" ng-model="bookModel.author"></select>

Но проблема с этим подходом заключается в том, что когда я выбираю автора из выпадающего списка, значение author свойство установлено в { id: 2, name: 'Jack London' } но мне нужно, чтобы это был идентификатор автора.

Вот Скрипка, которая иллюстрирует мою проблему. Попробуйте выбрать различные значения в раскрывающемся списке. Ниже раскрывающегося списка вы увидите обновленное значение bookModel.author, Мне нужно, чтобы это было целое число автора, а не объект. Поэтому, когда я выбираю Джека Лондона в раскрывающемся списке, мне нужно bookModel.author быть 2не { id: 2, name: 'Jack London' }, В противном случае мне нужно выполнять манипуляции с данными всякий раз, когда модель книги поступает с сервера и прежде чем я сохраню ее. Я полагаю, что может быть лучший путь. Может быть, это то, что может быть достигнуто с ng-options Директива?

Я пытался сделать это так:

<select ng-model="bookModel.author">
  <option ng-repeat="author in authors" value="{{author.id}}">{{author.name}}</option>
</select>

Это немного ближе, но так bookModel.authorЗначение будет строкой, а не целым числом.

Также я знаю, что могу установить transformRequest а также transformResponse функции для book $ resource, которые преобразуют данные в соответствующий формат. Но может быть, есть лучший способ?

Буду признателен за любую помощь!

Answer 1

Вы должны использовать author.id as author.name на ваше ng-options вот так:

<div ng-app="app">
  <div ng-controller="testController">
    <select ng-options="author.id as author.name for author in authors track by author.id" ng-model="bookModel.author"></select>
    <pre>{{bookModel.author | json}}</pre>
  </div>
</div>

Или, если вы хотите, чтобы имя автора:

<div ng-app="app">
  <div ng-controller="testController">
    <select ng-options="author.name as author.name for author in authors track by author.id" ng-model="bookModel.author"></select>
    <pre>{{bookModel.author | json}}</pre>
  </div>
</div>

ОБНОВЛЕНИЕ 1

Обновил свою скрипку