javascript - 使用AngularJS的ng-options使用select(Working with select using AngularJS's ng-options)

Question

I have read about it in other posts, but I couldn't figure it out.(我在其他帖子中已经阅读过它，但我无法弄明白。)

I have an array,(我有一个阵列，)

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

I want to render it as:(我想将其渲染为：)

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

And also I want to select the option with ID=000002.(而且我想选择ID = 000002的选项。)

I have read select and tried, but I can't figure it out.(我已经阅读过选择并试过了，但我无法弄明白。)

  ask by Andrej Kaurin translate from so

Answer 1

One thing to note is that ngModel is required for ngOptions to work... note the ng-model="blah" which is saying "set $scope.blah to the selected value".(需要注意的一点是ngOode 需要 ngModel才能工作...注意ng-model="blah" ，它说“将$ scope.blah设置为所选值”。)

Try this:(试试这个：)

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

Here's more from AngularJS's documentation (if you haven't seen it):(这里有更多来自AngularJS的文档（如果你还没有看到它）：)

for array data sources:(对于数组数据源：)

• label for value in array(数组中值的标签)
• select as label for value in array(选择作为数组中值的标签)
• label group by group for value in array = select as label group by group for value in array(对于array中的值，按组分组标签=按数组中的值选择为标签组)

for object data sources:(对于对象数据源：)

• label for (key , value) in object(对象中的（键，值）标签)
• select as label for (key , value) in object(选择对象中的（键，值）标签)
• label group by group for (key, value) in object(对象中的（键，值）按组标记)
• select as label group by group for (key, value) in object(为对象中的（键，值）按组选择标签)

---

For some clarification on option tag values in AngularJS:(有关AngularJS中选项标记值的一些说明：)

When you use ng-options , the values of option tags written out by ng-options will always be the index of the array item the option tag relates to .(使用ng-options ， ng-options 写出的选项标签的值将始终是选项标签所涉及的数组项的索引 。)

This is because AngularJS actually allows you to select entire objects with select controls, and not just primitive types.(这是因为AngularJS实际上允许您使用选择控件选择整个对象，而不仅仅是基本类型。) For example:(例如：)

app.controller('MainCtrl', function($scope) {
   $scope.items = [
     { id: 1, name: 'foo' },
     { id: 2, name: 'bar' },
     { id: 3, name: 'blah' }
   ];
});

<div ng-controller="MainCtrl">
   <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
   <pre>{{selectedItem | json}}</pre>
</div>

The above will allow you to select an entire object into $scope.selectedItem directly.(以上将允许您直接在$scope.selectedItem选择整个对象。)

The point is, with AngularJS, you don't need to worry about what's in your option tag.(关键是，使用AngularJS，您无需担心选项标签中的内容。) Let AngularJS handle that;(让AngularJS处理;) you should only care about what's in your model in your scope.(你应该只关心你范围内模型中的内容。)

Here is a plunker demonstrating the behavior above, and showing the HTML written out(这是一个展示上述行为的plunker，并显示HTML写出来)

---

Dealing with the default option:(处理默认选项：)

There are a few things I've failed to mention above relating to the default option.(我上面没有提到一些与默认选项有关的事情。)

Selecting the first option and removing the empty option:(选择第一个选项并删除空选项：)

You can do this by adding a simple ng-init that sets the model (from ng-model ) to the first element in the items your repeating in ng-options :(你可以通过添加一个简单的ng-init来设置模型（从ng-model ）到你在ng-options重复的项目中的第一个元素：)

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

Note: This could get a little crazy if foo happens to be initialized properly to something "falsy".(注意：如果foo恰好被初始化为“falsy”，这可能会有点疯狂。)

In that case, you'll want to handle the initialization of foo in your controller, most likely.(在这种情况下，您最有可能想要在控制器中处理foo的初始化。)

Customizing the default option:(自定义默认选项：)

This is a little different;(这有点不同;)

here all you need to do is add an option tag as a child of your select, with an empty value attribute, then customize its inner text:(这里你需要做的就是添加一个选项标签作为你的选择的子项，使用空值属性，然后自定义其内部文本：)

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

Note: In this case the "empty" option will stay there even after you select a different option.(注意：在这种情况下，即使您选择了其他选项，“空”选项也将保留在那里。)

This isn't the case for the default behavior of selects under AngularJS.(对于AngularJS下的选择的默认行为，情况并非如此。)

A customized default option that hides after a selection is made:(选择后隐藏的自定义默认选项：)

If you wanted your customized default option to go away after you select a value, you can add an ng-hide attribute to your default option:(如果您希望在选择值后自定义默认选项消失，则可以将ng-hide属性添加到默认选项：)

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>