使用AngularJS的ng-options进行选择

JavaScript

米亚GO

2020-03-14

我在其他帖子中已经读过，但是我无法弄清楚。

我有一个数组

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

我想将其呈现为：

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

我也想选择ID = 000002的选项。

我已经阅读了select并尝试过，但是我无法弄清楚。

第1587篇《使用AngularJS的ng-options进行选择》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
斯丁A 2020.03.14

如果每个选项都需要自定义标题，ng-options则不适用。而是ng-repeat与选项一起使用：

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>
阳光村村 2020.03.14

由于某些原因，AngularJS会让我感到困惑。他们的文档对此非常恐怖。欢迎提供更多更好的变体示例。

无论如何，我对本·莱什的回答略有不同。

我的数据收集看起来像这样：

items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]

现在

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

仍然导致选项值成为索引（0、1、2等）。

为我添加Track By修复：

<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>

我认为这种情况经常发生，您想将一组对象添加到选择列表中，所以我要记住这一点！

请注意，从AngularJS 1.4开始，您不能再使用ng-options了，但是需要ng-repeat在option标签上使用：

<select name="test">
   <option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android