如何使用带有对象数组的选择在AngularJS中为模型设置值

Question

我是 AngularJS 的新手，我正在尝试以最优雅的方式解决一个问题。

我有来自服务器的列表，并在我的应用程序中用作select 标签的option 的来源。让我们假设它是一个作者列表，如下所示：

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

我还有 book 模型，它来自并保存到服务器。本书的属性之一是author，用户可以从select 下拉列表中选择。当 book 模型被保存或从服务器获取时，它的author 字段表示为整数。下面是一个示例，说明应该如何将 book 模型保存在服务器上以及获取时的外观：

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

这是一个Fiddle，它说明了我的问题。尝试在下拉列表中选择不同的值。在下拉列表下方，您将看到 bookModel.author 的更新值。我需要它是作者的 id 整数，而不是对象。因此，每当我在下拉列表中选择 Jack London 时，我都需要将 bookModel.author 的值设为 2，而不是 { id: 2, name: 'Jack London' }。否则，只要 book 模型来自服务器并且在我保存它之前，我需要对数据进行操作。我想可能有更好的方法。也许这可以通过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 函数，这会将数据转换为适当的格式。但也许有更好的方法？

将不胜感激！

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