<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1"> <h3>基础下拉列表：</h3> <p> <select ng-model="user1" ng-options="u.name for u in users"> <option value="">--请选择--</option> </select> <span> {{user1}}</span> </p> <h3>带分组的下拉列表：</h3> <p> <select ng-model="user2" ng-options="u.name group by u.sex for u in users"> <option value="">--请选择--</option> </select> <span> {{user2}}</span> </p> <h3>组合的下拉列表：</h3> <p> <select ng-model="user3" ng-options="(u.name+u.age+'岁') group by u.sex for u in users"> <option value="">--请选择--</option> </select> <span> {{user3}}</span> </p> <h3>自定义ng-model的值：</h3> <p> <select ng-model="user4" ng-options="u.id as u.name group by u.sex for u in users"> <option value="">--请选择--</option> </select> <span> {{user4}}</span> </p> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { $scope.users = [{ id: 1, name: "tom", sex: "男", age: 19 }, { id: 2, name: "rose", sex: "女", age: 18 }, { id: 7, name: "jack", sex: "男", age: 16 }, { id: 9, name: "lucy", sex: "女", age: 20 }, { id: 15, name: "mark", sex: "男", age: 89 }]; }); </script> </body> </html>
运行结果：
3.2.2、ng-class-even与ng-class-odd
AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素
ng-class-even与ng-class类似，ng-repeat中偶数时应用
ng-class-odd与ng-class类似，ng-repeat中奇数时应用
<p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'"> {{a.name}} </p>
示例代码：
<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> <style> .bg1{ background: lightcoral; color:white; } .bg2{ background: lightpink; color: white; } </style> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1"> <ul> <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'"> {{u.name}} </li> </ul> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { $scope.users = [{ id: 1, name: "tom", sex: "男", age: 19 }, { id: 2, name: "rose", sex: "女", age: 18 }, { id: 7, name: "jack", sex: "男", age: 16 }, { id: 9, name: "lucy", sex: "女", age: 20 }, { id: 15, name: "mark", sex: "男", age: 89 }]; }); </script> </body> </html>
运行结果：
3.2.3、ng-bind-template
同时绑定多个表达式块
<p ng-bind-template="{{student1}} and {{student2}}"></p>
示例：
<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1"> <div ng-bind="info1">{{info2}}</div> <div ng-bind-template="{{info1}} ? 答案是：{{info2}}"></div> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为空 var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { $scope.info1="1+1="; $scope.info2="2"; }); </script> </body> </html>
结果：
3.2.4、ng-init
初始化
<p ng-init="test=1" ng-repeat="a in animals"> {{a.name}} {{a.id+test}} </p>
示例代码：