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

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

本文关键字：数组 设置 模型 对象 select AngularJS      更新时间：2023-09-26

我是AngularJS的新手，我想用最优雅的方式解决一个问题。

我有来自服务器的列表，并在我的应用程序中用作select标记的option的源。让我们假设它是一个作者列表，看起来像这样:

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

我也有书模型来自并保存到服务器。书的属性之一是author，用户可以从select下拉菜单中选择。当book model被保存或从服务器获取时，它的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。

这是一个小提琴，说明我的问题。尝试在下拉菜单中选择不同的值。在下拉列表中，您将看到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函数，它们将数据转换为适当的格式。但也许有更好的办法?

将感谢任何帮助!

你应该在你的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

更新你的小提琴

相关文章：