使用 AngularJS 的 ng 选项使用 select

需要注意的一点是，ngOptions需要ngModel才能工作...请注意，这是在说“将$scope.blah设置为所选值”。ng-model="blah"

试试这个：

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

以下是来自AngularJS文档的更多信息（如果您还没有看过的话）：

对于数组数据源：

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

对于对象数据源：

• 对象中（键、值）的标签
• 选择作为对象中（键、值）的标签
• 按组标记对象中（键、值）的标签组
• 按组选择对象中（键、值）的标签组

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

使用 时，ng-options 写出的选项标记的值将始终是选项标记相关的数组项的索引。这是因为AngularJS实际上允许您使用选择控件选择整个对象，而不仅仅是基元类型。例如：ng-options

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>

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

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

处理默认选项：

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

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

您可以通过添加一个将模型（from ）设置为重复的项目中的第一个元素的简单元素来执行此操作：ng-initng-modelng-options

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

注意：如果碰巧被正确初始化为“falsy”的东西，这可能会有点疯狂。在这种情况下，你很可能需要在控制器中处理 的初始化。foofoo

自定义默认选项：

这有点不同;在这里，您需要做的就是添加一个选项标签作为所选内容的子级，具有空值属性，然后自定义其内部文本：

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

注意：在这种情况下，即使您选择了其他选项，“空”选项也将保留在那里。对于 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>

我正在学习AngularJS，也在努力选择。我知道这个问题已经得到了解答，但我想分享更多的代码。

在我的测试中，我有两个列表框：汽车品牌和汽车模型。模型列表处于禁用状态，直到选择了某些品牌。如果稍后重置 make 列表框中的选择（设置为“选择品牌”），则模型列表框将再次被禁用，其选择也会重置（重置为“选择模型”）。Make 作为资源进行检索，而模型只是硬编码。

制作 JSON：

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

服务.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>

控制器.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"};
}