如何設置值在AngularJS中使用與對象數組選擇模型

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' }，但我需要它是一個作者的ID。

這是一個Fiddle，說明我的問題。嘗試在下拉菜單中選擇不同的值。在下拉菜單下方，您會看到更新後的值爲bookModel.author。我需要它是一個作者的ID整數，而不是對象。所以，只要我選擇傑克倫敦在下拉我需要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函數書$資源，它將數據轉換爲適當的格式。但也許有更好的方法？

會感謝任何幫助！

Answer 1

你應該在你的ng-options使用author.id as author.name像這樣：

<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

更新您的fiddle