使用AngularJS的ng-options选择

要注意的一件事是ngOptions起作用需要 ngModel。请注意，ng-model="blah"这是“将$ scope.blah设置为所选值”。

试试这个：

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

这里是AngularJS文档的更多内容（如果您还没有看过的话）：

对于数组数据源：

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

对于对象数据源：

• 对象中（key，value）的标签
• 选择作为对象中（key，value）的标签
• 为对象中的（键，值）分组标签
• 在对象中按组选择标签（键，值）

对于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处理；您应该只关心范围中模型的内容。

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

处理默认选项：

关于默认选项，我上面没有提到几件事。

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

您可以通过添加一个简单ng-init的模型来完成此操作，该模型将模型（from 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碰巧正确初始化为“ fassy”，这可能会有点疯狂。在这种情况下，您foo很可能希望在控制器中处理的初始化。

自定义默认选项：

这有点不同。在这里，您所需要做的就是添加一个选择标记作为您选择的子标记，并带有一个空值属性，然后自定义其内部文本：

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

注意：在这种情况下，即使选择其他选项，“空”选项也将保留在那里。AngularJS下selects的默认行为不是这种情况。

一个定制的默认选项，在选择之后会隐藏：

如果要在选择一个值后取消自定义的默认选项，则可以在默认选项中添加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>

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

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

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

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

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>

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

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

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

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

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

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

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

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