10.ng-class-even与ng-class-odd

最新推荐文章于 2025-08-11 19:52:03 发布

转载最新推荐文章于 2025-08-11 19:52:03 发布 · 224 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用AngularJS中的ng-class-even与ng-class-odd指令为ng-repeat生成的列表项自动切换不同样式，通过示例代码展示了如何实现列表项背景颜色的交替变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：https://www.cnblogs.com/best/tag/Angular/

AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素

ng-class-even与ng-class类似，ng-repeat中偶数时应用

ng-class-odd与ng-class类似，ng-repeat中奇数时应用

示例代码：

 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>

运行结果：