AngularJS 的 ng 选项答案

【问题标题】：ng-options with AngularJSAngularJS 的 ng 选项
【发布时间】：2015-10-20 00:52:55
【问题描述】：

我有一个对象数组，例如：

[对象 { id="121", name="Planes"}, 对象 { id="212", name="公共汽车"}, 对象 { id="210", name="Cars"}, . ... ]

我希望它出现在如下选择中：

<select....>
<option value="121"...>Planes</option>
<option value="212"...>Buses</option>
<option value="210"...>Cars</option>
</select>

但如果我使用以下代码：

 <select.... ng-options="category.id as category.name for category in categories" .....

我得到以下信息（值错误）：

<select....>
<option value="1"...>Planes</option>
<option value="2"...>Buses</option>
<option value="3"...>Cars</option>
</select>

我该如何解决这个问题？

谢谢

【问题讨论】：

【解决方案1】：

Angular 在选择中使用数值作为选项值，但您可以使用 ng-model 跟进您的选择值。

您可以尝试（取决于 Angular 版本）使用 track by 将正确的值放入选择中。 track by category.id 在你的情况下可能。

编辑：this 问题也几乎相同。有人在下面给你发了一个小提琴，所以我现在不会这样做..

【讨论】：

【解决方案2】：

在 ng-options 指令中使用 track by 选项

<select ng-options="category as category.name for category in categories track by category.id" ng-model="category"></select>

我为你做了一个fiddle

【讨论】：

谢谢，这很好用。而不是“category.id as category.name ...”只是将其更改为“category as category.name ...”并且它起作用了。非常感谢。

【解决方案3】：

呈现的<select> 中的值可能不正确，但这没关系，因为 ng-model 值将是所选类别的 id。

【讨论】：

谢谢，这非常有用，有助于我理解。我可以用你的小提琴看到对我使用 angularjs 的正确 ID 的访问。我在这个实现中遇到的一个问题（我确信有一个解决方案）是如果这个选择是常规 html 表单的一部分，那么会提交不正确的 id。
没错。但是，为什么在使用 Angular 时要使用“常规表单提交”？您是否知道使用 ng-model 和 ng-submit 的“角度表单提交”？这是实现此功能的标准方法。见：jsfiddle.net/jergush/m1xkezk1