AngularJS入门教程：ng-options

• 基础下拉列表：  请选择你的萌宠 猫 狗 兔 狮

  本节课程源码：

  1 2 3 4 5 6

  <div ng-controller="OptionCtrl">   <select ng-model="seleted" ng-options="a.name for a in animals">     <option value="">请选择你的萌宠</option>   </select> </div>

• 自定义下拉显示名称：  请选择你的萌宠 猫爱吃鱼 狗爱吃骨头 兔爱吃胡萝卜 狮爱吃肉

  本节课程源码：

  1 2 3 4 5 6

  <div ng-controller="OptionCtrl">   <select ng-model="seleted" ng-options="(a.name + '爱吃' + a.food) for a in animals">     <option value="">请选择你的萌宠</option>   </select> </div>

• 分组选项：  请选择你的萌宠 猫的爱好是玩球 兔的爱好是刨洞 狗的爱好是接盘子 狮的爱好是猎物

  本节课程源码：

  1 2 3 4 5 6

  <div ng-controller="OptionCtrl">   <select ng-model="seleted" ng-options="(a.name + '的爱好是' + a.favor) group by a.sex for a in animals">     <option value="">请选择你的萌宠</option>   </select> </div>

• 自定义ngModel的值：  请选择你的萌宠 猫 狗 兔 狮

  本节课程源码：

  1 2 3 4 5 6

  <div ng-controller="OptionCtrl">   <select ng-model="seletedId" ng-options="a.id as a.name for a in animals">     <option value="">请选择你的萌宠</option>   </select> </div>

本节课程源码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

var app = angular.module('OptionApp', []);   app.controller('OptionCtrl', ['$scope', function($scope){     $scope.seleted = '';     $scope.animals = [       {         id: '00001',         name: '猫',         sex: '雌',         food: '鱼',         favor: '玩球'       },       {         id: '00002',         name: '狗',         sex: '雄',         food: '骨头',         favor: '接盘子'       },       {         id: '00003',         name: '兔',         sex: '雌',         food: '胡萝卜',         favor: '刨洞'       },       {         id: '00004',         name: '狮',         sex: '雄',         food: '肉',         favor: '猎物'       }     ];   }]);

ngOptions(optional) – {comprehension_expression=}

名称	说明
forarraydatasources	labelforvalueinarray
	selectaslabelforvalueinarray
	labelgroupbygroupforvalueinarray
	selectaslabelgroupbygroupforvalueinarray
forobjectdatasources	labelfor(key,value)inobject
	selectaslabelfor(key,value)inobject
	labelgroupbygroupfor(key,value)inobject
	selectaslabelgroupbygroupfor(key,value)inobject
where	array / object : an expression which evaluates to an array / object to iterate over. value : local variable which will refer to each item in the array or each property value of object during iteration. key : local variable which will refer to a property name in object during iteration. label : The result of this expression will be the label for select : The result of this expression will be bound to the model of the parent <select> element. If not specified, select expression will default to value. group : The result of this expression will be used to group options using the <optgroup> DOM element.