Question

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

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

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

此外，我还有预订模型来自并保存到服务器。书籍的一个属性是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，说明了我的问题。尝试在下拉列表中选择不同的值。在下拉列表下方，您会看到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

您应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

更新了您的fiddle

如何使用带有对象数组的

1 个答案: