使用AngularJS的ng-options

时间:2015-07-29 07:18:30

标签: javascript angularjs

我有一个对象数组,例如:

  

[Object {id =“121”,name =“Planes”},Object {id =“212”,name =“Buses”},Object {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>

我该如何解决这个问题?

由于

3 个答案:

答案 0 :(得分:2)

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

您可以使用track by尝试(取决于Angular版本)以获取正确的值。你的情况可能是track by category.id

同时检查this question/answer

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

答案 1 :(得分:1)

使用ng-options指令

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

我为你做了fiddle

答案 2 :(得分:0)

呈现的<select>中的值可能不正确,但这无关紧要,因为ng-model值将是所选类别的ID。

请参阅:https://jsfiddle.net/prappjt3/2/