使用AngularJS的ng-options处理select

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

我有一个数组，

$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

2015-09-28 10:59:01

其他回答

如果每个选项都需要自定义标题，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>

2016-07-13 21:08:25

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

<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请求之后，列表选项就完成了。

但未设置所选选项。由于未知的原因，AngularJS在shadow $digest执行时没有按应有的方式绑定选定的对象。我必须使用jQuery来设置选定的。是很重要的!AngularJS在shadow中为ng-repeat选项生成的attr“value”的值添加了前缀。对于int型，它是“number:”。

$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);
           }
       });
}

2017-03-09 15:18:14

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>

2013-09-06 05:51:47

由于某些原因，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>

2014-10-26 07:21:25