<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myControl',['$scope',function($scope){
$scope.colors =[
{name:'black',shade:'dark'},{name:'white',shade:'light'},{name:'red',shade:'blood'},{name:'yellow',shade:'banana'}
];
$scope.object = {
dark:'black',light:'white',banana:'yellow'
};
$scope.buttonFun = function(){
alert($scope.myColor2);
}
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="myControl">
<!--label for value in array-->
<!--解析的代码： <option value="object:6" label="yellow">yellow</option>-->
<!--
注意:ng-model中值存放的是color对象，不是每一个属性，就是控制器中的每一条数据 ***********
-->
<select ng-model="myColor1" ng-options="color.name for color in colors"></select> {{myColor1.name + ":" +myColor1.shade}}<br />
<!-- select as label for value in array-->
<!--<option value="blood" label="red">red</option>--> <!-- value的值 as text中的值 for item in 数组对象 -->
<select ng-model="myColor2" ng-change="buttonFun()" ng-options="color.shade as color.name for color in colors"></select> <br />
<!-- label group by group for value in array-->
<!--
<optgroup label="dark">
<option value="3" label="black">black</option>
</optgroup>
text文本 group by 显示的文本 for item in 数组对象
-->
<select ng-model="myColor3" ng-options="color.name group by color.shade for color in colors"></select><br />
<!--label for (key,value) in object-->
<select ng-model="myObj1" ng-options="key for (key,value) in object"></select><br />
<!--label group by group for (key,value) in object-->
<select ng-model="myObj2" ng-options="key group by value for (key,value) in object">
<option value="">--make choice--</option>
</select><br />
</body>
</html>
