采用了棱角分明的NG选项与选择工作 [英] Working with select using Angular's ng-options
问题描述
我在其他职位读到它，但无法弄清楚。
我有数组：
I have read about it in other posts but couldn't figure out. I have array:
$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。
And also I want to select option with ID=000002.
我已阅读本<一个href=\"http://docs.angularjs.org/api/ng.directive%3aselect\">http://docs.angularjs.org/api/ng.directive:select和尝试，但无法弄清楚。
I have read this http://docs.angularjs.org/api/ng.directive:select and tried but can't figure out.
推荐答案
有一点要注意的是，ngModel是的需要的为ngOptions工作...注意 NG-模型=嗒嗒这是说$ scope.blah设置为选定的价值。
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".
试试这个：
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
下面是从角的文档更多（如果你还没有看到它）：
Here's more from Angular's documentation (if you haven't seen it):
有关阵列数据来源：
- 标签中的数组值
- 选择在阵列标签值
- 标签中数组值GROUP BY组
通过=组值在数组中选择的标签组
有关对象的数据源：
- 在对象标签（键，值）
- 选择在对象标签（键，值）
- 标签组由组（键，值）的目标
- 选择由组（键，值）的目标 标签组
当您使用 NG-选项，选项标签伍选项写出来的值将始终是数组项的选项标记所涉及的指标到。这是因为实际角度，您可以选择与选择控件整个对象，而不仅仅是原始类型。例如：
For some clarification on option tag values in Angular
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 Angular 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>
以上将允许您直接选择整个对象为 $ scope.selectedItem 。 的一点是，与棱角分明，你不需要担心什么在你选择的标签。让角处理，你应该只关心什么在你的范围内模型。
这里是一个plunker展示的行为上面，并显示HTML写出来
有我没有提到上述有关默认选项的几件事情。
There are a few things I've failed to mention above relating to the default option.
选择第一个选项，并取出空的选项：
您可以通过添加一个简单的 NG-INIT 的设置模式（从 NG-模型）做到这一点在项目的第一个元素的重复中 NG-选项：
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>
请注意：这可能会有点疯了，如果富恰好是正确初始化的东西falsy。在这种情况下，你要处理foo的初始化在你的控制器，最有可能的。
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.
自定义默认选项：
这是一个有点不同，这里所有你需要做的就是添加一个选项标记为您选择的孩子，带一个空值的属性，然后自定义它的内部文本：
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 it's inner text:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
请注意：在这种情况下，空选项将呆在那里，你选择不同的选项后还是一样。这不是选择的角度下的默认行为的情况。
Note: that 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 Angular.
选择后隐藏着一个自定义的默认选项是由：
如果您想您的自定义默认选项走开你选择一个值后，可以将NG隐藏属性添加到您的默认选项：
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>
这篇关于采用了棱角分明的NG选项与选择工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
