如何使用带有对象数组的 select 在 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，所以每当我想保存书籍模型时，我只需调用它的保存方法。

为了实现这个逻辑，我尝试将 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 可以说明我的问题。尝试 select 下拉列表中的不同值。在下拉列表下方，您将看到 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

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

How to set value to model in AngularJS using select with array of objects

javascript

angularjs

ng-options

angular-ngmodel

angularjs-select