javascript - 如何使用 select 和对象数组在 AngularJS 中设置模型的值

Question

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

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

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

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

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

book 在我的应用程序中表示为 Angular 的 $resource，因此每当我想保存图书模型时，我只需调用它的 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 ，名称:“ jack ·伦敦”}。否则，每当 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作为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