0

私は AngularJS を初めて使用し、最もエレガントな方法で 1 つの問題を解決しようとしています。

selectサーバーから取得され、アプリケーションでタグのソースとして使用されるリストがあり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
}

bookは私のアプリケーションでは Angular のものとして表され$resourceているので、book モデルを保存したいときはいつでも save メソッドを呼び出すだけです。

このロジックを実装するために、次のよう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 である必要があることです。

ここに私の問題を説明するフィドルがあります。ドロップダウンで別の値を選択してみてください。ドロップダウンの下に、 の更新された値が表示されますbookModel.author。オブジェクトではなく、著者のID整数である必要があります。したがって、ドロップダウンでJack LondonbookModel.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の値は整数ではなく文字列になります。

また、データを適切な形式に変換する book $resource を設定transformRequestして機能できることも知っています。transformResponseしかし、もっと良い方法があるのではないでしょうか?

どんな助けにも感謝します！

4

1 に答える 1

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

フィドルを更新しました

于 2016-08-09T20:03:13.580 に答える