ngOptions将option的value属性设置为意外值

时间:2015-08-05 14:46:50

标签: angularjs

我对使用ngoptions有些怀疑。我无法为选项设置值属性。这是example plunker

  $scope.ListOfValues=[{optiontext:'Active',optionvalue:'opt1'},
     {optiontext:'inactive',optionvalue:'opt2'},
     {optiontext:'terminated',optionvalue:'opt3'}];

我的HTML代码是

 <select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext  for emp in ListOfValues">
</select>

生成的html如下所示。

<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext  for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
  <option value="string:opt1" label="Active">Active</option>
  <option value="string:opt2" label="inactive">inactive</option>
  <option value="string:opt3" label="terminated">terminated</option>
</select>

我期待它如下所示

<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext  for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
      <option value="opt1" label="Active">Active</option>
      <option value="opt2" label="inactive">inactive</option>
      <option value="opt3" label="terminated">terminated</option>
 </select>

那为什么要将value:添加到value属性?我怎么能得到我想要的输出?

1 个答案:

答案 0 :(得分:3)

它必须处理1.3 - &gt; 1.4 Angular版本API更改 - 如果您选中此plunkr (v.1.3),它将仅显示索引作为<option>标记的值。

要使它也适用于Angular +1.4,您应该将以下语句添加到ng-options表达式track by emp.optionvalue。请参阅此plunkr (v.1.4)

 <select id="emptype"
         ng-model="empstatus"
         ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues track by emp.optionvalue">
     </select>

但是ng-model的值在两种情况下都已正确更新,请参阅我的示例模板中的{{empstatus}}。 所以@ExplosionPills说这应该不是问题。