AngularJS select對(duì)象

這是一個(gè)比較牛B的控件。它里面的一個(gè)叫做 ng-options 的屬性用于數(shù)據(jù)呈現(xiàn)。

對(duì)于給定列表時(shí)的使用。

最簡(jiǎn)單的使用方法， x for x in list ：

<form name="test_form" ng-controller="TestCtrl" ng-init="o=[0,1,2,3]; a=o[1];">
  <select ng-model="a" ng-options="x for x in o" ng-change="show()">
    <option value="">可以加這個(gè)空值</option>
  </select>
</form>

<script type="text/javascript">
angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.show = function(){
    console.log($scope.a);
  }
});
angular.bootstrap(document.documentElement, ['app']);
</script>

在 $scope 中， select 綁定的變量，其值和普通的 value 無關(guān)，可以是一個(gè)對(duì)象：

<form name="test_form" ng-controller="TestCtrl"
      ng-init="o=[{name: 'AA'}, {name: 'BB'}]; a=o[1];">
  <select ng-model="a" ng-options="x.name for x in o" ng-change="show()">
  </select>
</form>

顯示與值分別指定， x.v as x.name for x in o ：

<form name="test_form" ng-controller="TestCtrl"
      ng-init="o=[{name: 'AA', v: '00'}, {name: 'BB', v: '11'}]; a=o[1].v;">
  <select ng-model="a" ng-options="x.v as x.name for x in o" ng-change="show()">
  </select>
</form>

加入分組的， x.name group by x.g for x in o ：

<form name="test_form" ng-controller="TestCtrl"
      ng-init="o=[{name: 'AA', g: '00'},
                  {name: 'BB', g: '11'},
                  {name: 'CC', g: '00'}]; a=o[1];">
  <select ng-model="a" ng-options="x.name group by x.g for x in o" ng-change="show()">
  </select>
</form>

分組了還分別指定顯示與值的， x.v as x.name group by x.g for x in o ：

<form name="test_form" ng-controller="TestCtrl"
ng-init="o=[{name: 'AA', g: '00', v: '='},
            {name: 'BB', g: '11', v: '+'},
            {name: 'CC', g: '00', v: '!'}]; a=o[1].v;">
  <select ng-model="a" ng-options="x.v as x.name group by x.g for x in o"
          ng-change="show()">
  </select>
</form>

如果參數(shù)是對(duì)象的話，基本也是一樣的，只是把遍歷的對(duì)象改成 (key, value) ：

<form name="test_form" ng-controller="TestCtrl" ng-init="o={a: 0, b: 1}; a=o.a;">
  <select ng-model="a" ng-options="k for (k, v) in o" ng-change="show()">
  </select>
</form>

<form name="test_form" ng-controller="TestCtrl"
      ng-init="o={a: {name: 'AA', v: '00'}, b: {name: 'BB', v: '11'}}; a=o.a.v;">
  <select ng-model="a" ng-options="v.v as v.name for (k, v) in o"
          ng-change="show()">
  </select>
</form>

<form name="test_form" ng-controller="TestCtrl"
      ng-init="o={a: {name: 'AA', v: '00', g: '=='},
                  b: {name: 'BB', v: '11', g: '=='}}; a=o.a;">
  <select ng-model="a" ng-options="v.name group by v.g for (k, v) in o"
          ng-change="show()">
  </select>
</form>

<form name="test_form" ng-controller="TestCtrl"
      ng-init="o={a: {name: 'AA', v: '00', g: '=='},
                  b: {name: 'BB', v: '11', g: '=='}}; a=o.a.v;">
  <select ng-model="a" ng-options="v.v as v.name group by v.g for (k, v) in o"
          ng-change="show()">
  </select>
</form>