Question

我在其他帖子中已经读过这篇文章，但我无法理解。

我有一个数组，

$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 并尝试过，但我无法理解。

Answer 1

需要注意的一点是ngModel是必需的以使ngOptions有效...请注意ng-model="blah"说“将$ scope.blah设置为所选值”。

试试这个：

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

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

用于数组数据源：


数组中值的标签

选择数组中值的标签

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

用于对象数据源：


对象中的（键，值）标签

选择对象
中的（键，值）标签
按对象（按键，值）分组对象

按对象中的（键，值）按组选择标签组

有关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处理;你应该只关心你范围内模型中的内容。

Here is a plunker demonstrating the behavior above, and showing the HTML written out

处理默认选项：

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

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

您可以通过添加一个简单的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的初始化。

自定义默认选项：

这有点不同;这里你需要做的就是添加一个选项标签作为你的选择的子项，带有一个空值属性，然后自定义它的内部文本：

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

Answer 2

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

在我的测试中，我有两个列表框：汽车制造和汽车模型。在选择某些make之前，模型列表将被禁用。如果稍后重置了选择列表框（设置为＆＃39;选择生成＆＃39;），则模型列表框将再次被禁用，并且其选择也将被重置（选择模型＆＃39;）。将模型作为资源检索，而模型只是硬编码。

制作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"};
}

Answer 3

出于某种原因，AngularJS让我感到困惑。他们的文件非常可怕。欢迎提供更多好的变体示例。

无论如何，我对Ben Lesh的答案略有不同。

我的数据集如下所示：

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

现在

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

仍然导致选项值成为索引（0,1,2等）。

添加 Track By 为我修复了它：

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

我认为你经常想要将一个对象数组添加到一个选择列表中，所以我要记住这一个！

请注意，从AngularJS 1.4开始，您无法再使用ng-options，但您需要在选项标记上使用ng-repeat：

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

Answer 4

这个问题已经得到解答了（顺便提一下，Ben提供了非常好的全面答案），但我想补充一点完整性，这也可能非常方便。

在Ben建议的例子中：

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

使用了以下ngOptions表单：select as label for value in array。

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

示例：

ng-options="item.ID as item.Title + ' - ' + item.ID for item in items"为您提供Title - ID
ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items"为您提供Title (X)等标签，其中X是标题字符串的长度。

您也可以使用过滤器，例如

ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items"为您提供Title (TITLE)等标签，其中Title属性的标题值与TITLE的值相同但转换为大写字符。

ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items"

Title (27 Sep 2015)会为您提供SomeDate等标签

Answer 5

在CoffeeScript中：

#directive
app.directive('select2', ->
    templateUrl: 'partials/select.html'
    restrict: 'E'
    transclude: 1
    replace: 1
    scope:
        options: '='
        model: '='
    link: (scope, el, atr)->
        el.bind 'change', ->
            console.log this.value
            scope.model = parseInt(this.value)
            console.log scope
            scope.$apply()
)

<!-- HTML partial -->
<select>
  <option ng-repeat='o in options'
          value='{{$index}}' ng-bind='o'></option>
</select>

<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>

<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>

Answer 6

如果您需要为每个选项设置自定义标题，则ng-options不适用。而是使用ng-repeat选项：

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

Answer 7

我希望以下内容适合您。

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>

Answer 8

它可能很有用。绑定并不总是有效。

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products"></select>

例如，您从REST服务填充选项列表源模型。在填充列表之前已知选定的值，并且已设置。使用$ http执行REST请求后，列表选项就完成了。

但未设置所选选项。由于未知原因，shadow $ digest执行中的AngularJS未按预期绑定。我必须使用jQuery来设置所选。这很重要！阴影中的AngularJS将前缀添加到attr＆＃34;值＆＃34;的值。由ng-repeat选项生成。对于int，它是＆＃34;数字：＆＃34;。

$scope.issue.productId = productId;
function activate() {
    $http.get('/product/list')
       .then(function (response) {
           $scope.products = response.data;

           if (productId) {
               console.log("" + $("#product option").length);//for clarity
               $timeout(function () {
                   console.log("" + $("#product option").length);//for clarity
                   $('#product').val('number:'+productId);

               }, 200);
           }
       });
}

使用AngularJS的ng-options使用select

8 个答案:

制作JSON：

services.js：

HTML文件：

controllers.js：