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

Question

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

У меня есть список, который исходит от сервера и используется как источник для select tag's 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' }, но мне нужно, чтобы это был идентификатор автора.

Вот Fiddle, который иллюстрирует мою проблему. Попробуйте выбрать различные значения в раскрывающемся списке. Ниже вы увидите обновленное значение bookModel.author. Мне нужно, чтобы он был целым числом автора, а не объектом. Поэтому всякий раз, когда я выбираю Jack London in drop down Мне нужно значение 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 значение «s будет строкой, а не целое число.

Также я знаю, что могу установить transformRequest и transformResponse функции для книги $ 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> 

UPDATE 1

Изменено ваш fiddle