使用 AngularJS 的 ng-options 进行选择 [英] Working with select using AngularJS's ng-options

问题描述

我在其他帖子中读到过它，但我无法弄清楚.

我有一个数组，

$scope.items = [{ID:'000001'，标题:'芝加哥'}，{ID:'000002'，标题:'纽约'}，{ID:'000003'，标题:'华盛顿'}，];

我想将其呈现为:

<option value="000001">芝加哥</option><option value="000002">纽约</option><option value="000003">华盛顿</option></选择>
而且我还想选择 ID=000002 的选项.
我已阅读 select 并尝试过，但我想不通.
解决方案
需要注意的一点是，ngModel 是 必需的 ngOptions 才能工作...注意 ng-model="blah" 意思是将 $scope.blah 设置为选定的值".
试试这个:

这里有更多来自 AngularJS 的文档(如果你还没有看过):

<块引用>

对于数组数据源:

• 数组中值的标签
• 选择作为数组中值的标签
• 按组标记数组中的值= 为数组中的值按组选择标签

对于对象数据源:

• 对象中 (key , value) 的标签
• 选择作为对象中 (key , value) 的标签
• 为对象中的(键，值)逐组标记
• 按组为对象中的(键，值)选择标签

<小时>

关于 AngularJS 中选项标签值的一些说明:

当你使用ng-options时，ng-options写出的option标签的值将永远是option标签关联的数组项的索引.这是因为 AngularJS 实际上允许您使用选择控件选择整个对象，而不仅仅是原始类型.例如:

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

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

以上将允许您直接将整个对象选择到 $scope.selectedItem 中.重点是，使用 AngularJS，您无需担心选项标签中的内容.让 AngularJS 来处理；您应该只关心您范围内模型中的内容.

这是一个演示上述行为的 plunker，并显示了写出的 HTML

<小时>

处理默认选项:

关于默认选项，我上面没有提到一些事情.

选择第一个选项并删除空选项:

您可以通过添加一个简单的 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"></选择>

注意:如果 foo 恰好被正确初始化为falsy"，这可能会变得有点疯狂.在这种情况下，您很可能希望在控制器中处理 foo 的初始化.

自定义默认选项:

这有点不同；在这里您需要做的就是添加一个选项标签作为您选择的子项，使用空值属性，然后自定义其内部文本:

<option value="">未选择任何内容</option></选择>
注意:在这种情况下，即使您选择了不同的选项，空"选项也会保留在那里.对于 AngularJS 下的默认选择行为，情况并非如此.
选择后隐藏的自定义默认选项:
如果您希望自定义的默认选项在您选择一个值后消失，您可以在默认选项中添加一个 ng-hide 属性:
<option value="" ng-if="foo">选择要删除我的内容.</option></选择>

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.

I have read select and tried, but I can't figure it out.

解决方案

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".

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):

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

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:

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. This is because AngularJS actually allows you to select entire objects with select controls, and not just primitive types. 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. The point is, with AngularJS, you don't need to worry about what's in your option tag. Let AngularJS handle that; 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

---

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:

<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". In that case, you'll want to handle the initialization of foo in your controller, most likely.

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.

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:

<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>

这篇关于使用 AngularJS 的 ng-options 进行选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！