我在其他文章中读到过,但我不明白。

我有一个数组,

$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,试过了,但我不明白。


当前回答

这个问题已经回答了(顺便说一下,Ben提供了一个非常好的和全面的答案),但我想添加另一个元素来完整,这可能也很方便。

在本建议的例子中:

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

使用了下面的ngOptions表单:select作为数组中值的标签。

Label是一个表达式,其结果将是<option>元素的标签。在这种情况下,您可以执行某些字符串连接,以便拥有更复杂的选项标签。

例子:

ng-options = "项目。ID为项目。标题+ ' - ' + item。“项目中的项目ID”为您提供标题- ID之类的标签 ng-options = "项目。ID为项目。Title + ' (' + item.Title.length + ')' for item in items"给出了Title (X)这样的标签,其中X是Title字符串的长度。

你也可以使用过滤器,例如,

ng-options = "项目。ID为项目。标题+ '(' +(项目。Title |大写)+ ')' for items中的item "为您提供了Title (Title)这样的标签,其中Title属性和Title的Title值是相同的值,但转换为大写字符。 ng-options = "项目。ID为项目。标题+ '(' +(项目。SomeDate | date) + ')' for item in items”给你的标签是Title(2015年9月27日),如果你的模型有一个属性SomeDate

其他回答

由于某些原因,AngularJS让我感到困惑。他们在这方面的文件非常糟糕。我们欢迎更多关于变化的好例子。

不管怎样,我对本·莱什的回答有一点不同。

我的数据集合是这样的:

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

Now

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

仍然导致选项值为索引(0、1、2等)。

添加轨道通过修复它为我:

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

我认为它经常发生,你想要添加一个对象数组到一个选择列表,所以我要记住这个!

注意,从AngularJS 1.4开始,你不能再使用ng-options了,但是你需要在你的option标签上使用ng-repeat:

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

我正在学习AngularJS,在选择方面也很挣扎。我知道这个问题已经有了答案,但我还是想分享更多的代码。

在我的测试中,我有两个列表框:汽车制造商和汽车模型。模型列表被禁用,直到一些make被选中。如果在制作列表框中的选择稍后被重置(设置为“选择制作”),那么模型列表框再次被禁用,其选择也被重置(为“选择模型”)。make作为资源检索,而模型只是硬编码的。

使得JSON:

[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]

services.js:

angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
    return $resource('makes.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

HTML文件:

<div ng:controller="MakeModelCtrl">
  <div>Make</div>
  <select id="makeListBox"
      ng-model="make.selected"
      ng-options="make.code as make.name for make in makes"
      ng-change="makeChanged(make.selected)">
  </select>

  <div>Model</div>
  <select id="modelListBox"
     ng-disabled="makeNotSelected"
     ng-model="model.selected"
     ng-options="model.code as model.name for model in models">
  </select>
</div>

controllers.js:

function MakeModelCtrl($scope)
{
    $scope.makeNotSelected = true;
    $scope.make = {selected: "0"};
    $scope.makes = Make.query({}, function (makes) {
         $scope.make = {selected: makes[0].code};
    });

    $scope.makeChanged = function(selectedMakeCode) {
        $scope.makeNotSelected = !selectedMakeCode;
        if ($scope.makeNotSelected)
        {
            $scope.model = {selected: "0"};
        }
    };

    $scope.models = [
      {code:"0", name:"Select Model"},
      {code:"1", name:"Model1"},
      {code:"2", name:"Model2"}
    ];
    $scope.model = {selected: "0"};
}

需要注意的一点是ngModel是ngOptions工作所必需的…注意ng-model="blah"的意思是"set $scope。废话到选定的值”。

试试这个:

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

下面是AngularJS文档中的更多内容(如果你还没看过的话):

对于数组数据源: 数组中值的标签 为数组中的值选择标签 为数组中的值逐组标记 = select作为标签组的值在数组中 对于对象数据源: 对象中(键,值)的标签 选择对象中(键,值)的标签 为对象中的(键,值)按组标记 为对象中的(键,值)选择按组作为标签


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

当您使用ng-options时,ng-options写入的选项标记的值将始终是该选项标记所关联的数组项的索引。这是因为AngularJS实际上允许你用选择控件选择整个对象,而不仅仅是基本类型。例如:

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来处理;您应该只关心作用域内模型中的内容。

下面是一个演示上述行为的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"></select>

注意:如果foo恰好被正确地初始化为“假的”,这可能会有点疯狂。在这种情况下,你很可能想在你的控制器中处理foo的初始化。

自定义默认选项:

这有点不同;在这里,你所需要做的就是添加一个option标签作为你的select的子标签,带有一个空的value属性,然后自定义它的内部文本:

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

注意:在这种情况下,即使您选择了不同的选项,“empty”选项也会保留在那里。在AngularJS中,选择的默认行为不是这样的。

自定义默认选项,在做出选择后隐藏:

如果你想要自定义的默认选项在你选择一个值后消失,你可以添加一个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>

这个问题已经回答了(顺便说一下,Ben提供了一个非常好的和全面的答案),但我想添加另一个元素来完整,这可能也很方便。

在本建议的例子中:

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

使用了下面的ngOptions表单:select作为数组中值的标签。

Label是一个表达式,其结果将是<option>元素的标签。在这种情况下,您可以执行某些字符串连接,以便拥有更复杂的选项标签。

例子:

ng-options = "项目。ID为项目。标题+ ' - ' + item。“项目中的项目ID”为您提供标题- ID之类的标签 ng-options = "项目。ID为项目。Title + ' (' + item.Title.length + ')' for item in items"给出了Title (X)这样的标签,其中X是Title字符串的长度。

你也可以使用过滤器,例如,

ng-options = "项目。ID为项目。标题+ '(' +(项目。Title |大写)+ ')' for items中的item "为您提供了Title (Title)这样的标签,其中Title属性和Title的Title值是相同的值,但转换为大写字符。 ng-options = "项目。ID为项目。标题+ '(' +(项目。SomeDate | date) + ')' for item in items”给你的标签是Title(2015年9月27日),如果你的模型有一个属性SomeDate

如果每个选项都需要自定义标题,ng-options不适用。应该使用ng-repeat with options:

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