转自:https://www.cnblogs.com/best/tag/Angular/
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>
示例代码:
1 <!DOCTYPE html> 2 <!--指定angular管理的范围--> 3 <html ng-app="app01"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>指令</title> 7 <style> 8 .bg1{ 9 background: lightcoral; 10 color:white; 11 } 12 .bg2{ 13 background: lightpink; 14 color: white; 15 } 16 </style> 17 </head> 18 <body> 19 <!--指定控制器的作用范围--> 20 <form ng-controller="Controller1" name="form1"> 21 <ul> 22 <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'"> 23 {{u.name}} 24 </li> 25 </ul> 26 </form> 27 <!--引入angularjs框架--> 28 <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> 29 <script type="text/javascript"> 30 //定义模块,指定依赖项为空 31 var app01 = angular.module("app01", []); 32 //定义控制器,指定控制器的名称,$scope是全局对象 33 app01.controller("Controller1", function($scope) { 34 $scope.users = [{ 35 id: 1, 36 name: "tom", 37 sex: "男", 38 age: 19 39 }, { 40 id: 2, 41 name: "rose", 42 sex: "女", 43 age: 18 44 }, { 45 id: 7, 46 name: "jack", 47 sex: "男", 48 age: 16 49 }, { 50 id: 9, 51 name: "lucy", 52 sex: "女", 53 age: 20 54 }, { 55 id: 15, 56 name: "mark", 57 sex: "男", 58 age: 89 59 }]; 60 }); 61 </script> 62 </body> 63 </html>
运行结果: