オブジェクトの配列でselectを使用してAngularJSのモデルに値を設定する方法

Question

私はAngularJSを初めて使いました。私は最も優雅な方法で1つの問題を解決しようとしています。

私はサーバーから来て、私のアプリケーションではタグのoptionのソースとして使用されるリストを持っています。

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

また、私はから来て、サーバーに保存ブックモデルを持っている：それはこのようになります作者のリストだと仮定します。ブックのプロパティの1つはauthorで、selectドロップダウンからユーザーが選択できます。 モデルが保存されたり、サーバからフェッチされた場合、authorフィールドは整数として表されます。ここでモデルは、サーバー上に保存する方法書籍の一例であり、それは時にフェッチされたどのように見えるか：

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

ブックは角の$resource私のアプリケーションで私は本モデルIを保存したいので、いつでものように表されるだけそれをsaveメソッドと呼ぶ。

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

しかし、このアプローチの問題は、私はauthorプロパティの値がドロップダウンから作者を選ぶときが設定されていることである。私はこのようなng-optionsディレクティブでselectを使用しようとしました。このロジックを実装する

{ id: 2, name: 'Jack London' }に、私はそれが著者のIDである必要があります。

ここに私の問題を示すFiddleがあります。ドロップダウンで異なる値を選択してみてください。ドロップダウンの下には、更新された値bookModel.authorが表示されます。私はそれがオブジェクトではなく、作者のid整数である必要があります。だから私がジャックロンドンドロップダウンを選択するたびに、私はbookModel.authorの値がでなく、{ 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

あなたがそうのようなあなたのng-optionsにauthor.id as author.nameを使用する必要があります。

<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

を更新：あなたは著者の名前をしたい場合は、

<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> 

しますか、