搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 新鹏指南 > 论AngularJS添加元素样式,隔行换色的处理技巧

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

新鹏指南 2018-02-28

首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在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>


1、首先,第一个< li >元素的"ng-class"值与"bold"属性值绑定,使得该值指定的样式加粗,这个相信大家都能看懂;


2、使用“ng-class-odd”和"ng-class-even"样式分别绑定奇数和偶数行的样式,从而实现了隔行换色的功能;


3、最后我们解释一下,如何使得所点击的< li >元素变色

 ①在< li >元素的单击事件中,将执行$scope对象中添加的"li_click()"方法;


 ②在该方法中将"$index(行号值)"作为实参传给方法,并将"focus"属性值设为“$index”值;


 ③因此当单击某行< li >元素时,"focus"属性值将变为相应的"$index";


 ④此时,< li >元素的"ng-class"样式指令通过key/value对象的方式指定该元素需要添加的样式,由于单击< li >元素时,"$index"变量值和"focus"属性值相同,也就是说"$index==focus"的返回值为true;


 ⑤此时您应该明白了,"ng-class"的样式指令值变为"focus";


 ⑥经过上面的分析及操作,我们实现了单击< li >元素时,添加背景样式的效果.





我是大鹏,一位互联网一线开发者,欢迎各位留言与我互动交流。长按二维码点关注,下次来看不迷路哦!


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《论AngularJS添加元素样式,隔行换色的处理技巧》的版权归原作者「新鹏指南」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注新鹏指南微信公众号

新鹏指南微信公众号:gh_6fb5e44ceedc

新鹏指南

手机扫描上方二维码即可关注新鹏指南微信公众号

新鹏指南最新文章

精品公众号随机推荐