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

问题描述

我已经在其他帖子中看过它，但我无法弄明白。

I have read about it in other posts, but I couldn't figure it out.

我有一个数组，

$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 the option with ID=000002.

我已阅读 选择 并试过，但我无法弄明白。

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

推荐答案

有一点需要注意的是，ngModel 是必需的让ngOptions工作......注意 ng-model =blah这就是说将$ 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>

以下是AngularJS文档中的更多内容（如果您还没有看到）：

Here's more from AngularJS's documentation (if you haven't seen it):

用于数组数据源：

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

---

有关AngularJS中选项标签值的一些说明：

---

For some clarification on option tag values in AngularJS:

当您使用 ng-options ， ng-options写出的选项标签的值将始终是ar的索引选项标签与相关的投影项目。这是因为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>

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

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.

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

处理默认选项：

我上面提到的一些与默认选项无关的事情。

There are a few things I've failed to mention above relating to the default option.

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

您可以通过添加一个简单的<$来执行此操作c $ c> ng-init 将模型（从 ng-model ）设置为您在<$ c中重复的项目中的第一个元素$ c> ng-options ：

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>

注意：如果 foo 碰巧被正确地初始化为虚假的东西。在这种情况下，你最好在控制器中处理 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 its inner text:

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

注意：在这种情况下，即使您选择了其他选项，空选项也会保留在那里。对于AngularJS下的选择的默认行为，情况并非如此。

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.

在进行选择后隐藏的自定义默认选项：

如果您希望在选择值后自定义默认选项消失，可以在默认选项中添加ng-hide属性：

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使用select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！