论AngularJS添加元素样式，隔行换色的处理技巧

Posted 2021-04-26 新鹏指南

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了论AngularJS添加元素样式，隔行换色的处理技巧相关的知识，希望对你有一定的参考价值。

首先解释需求是这样的，有个列表，当你点击哪一行时，哪一行背景变成灰色，在JQ中，大家都知道，这是非常容易的，加一个addClass就行了，那么AngularJS如何实现呢？

下面我们看代码部分

 1<!doctype html>
 2<html ng-app="a2_11">
 3<head>
 4    <title>添加元素样式</title>
 5    <script src="../Script/angular.min.js"  type="text/javascript"></script>
 6<style type="text/css">
 7    body{font-size:12px}
 8    ul{margin:0;padding:0;width:408px;list-style-type:none}
 9    ul li{float:left;padding:5px 0}
10    ul .odd{color:#0026ff}
11    ul .even{color:red}
12    ul .bold{font-weight:700}
13    ul li span{float:left;padding:0 10px;width:52px}
14    ul .focus{background-color:#ccc}
15</style>
16</head>
17<body>
18    <div ng-controller="c2_11">
19        <ul>
20            <li ng-class="{{bold}}">
21                <span>序号</span>
22                <span>姓名</span>
23                <span>性别</span>
24                <span>是否首条</span>
25                <span>是否尾条</span>
26            </li>
27            <li ng-class-odd="'odd'"
28                ng-class-even="'even'"
29                ng-repeat=" stu in data"
30                ng-click='li_click($index)'
31                ng-class='{focus: $index==focus}'>
32                <span>{{$index+1}}</span>
33                <span>{{stu.name}}</span>
34                <span>{{stu.sex}}</span>
35                <span>{{$first?'是':'否'}}</span>
36                <span>{{$last?'是':'否'}}</span>
37            </li>
38        </ul>
39    </div>
40    <script type="text/javascript">
41        var a2_11 = angular.module('a2_11', []);
42        a2_11.controller('c2_11', ['$scope', function ($scope) {
43            $scope.bold = "bold";
44            $scope.li_click = function (i) {
45                $scope.focus = i;
46            };
47            $scope.data = [
48            { name: "张明明", sex: "女" },
49            { name: "李清思", sex: "女" },
50            { name: "刘小华", sex: "男" },
51            { name: "陈忠忠", sex: "男" }
52            ];
53        }]);
54    </script>
55</body>
56</html>