本文介绍了AngularJS点击添加样式和点击改变颜色的示例代码，并与大家分享如下：

首先，需求说明如下。有一份名单。当您单击哪一行时，哪一行的背景会变成灰色。在JQ，每个人都知道这很容易。只需添加一个addClass。如何实现AngularJS？

让我们看看下面的代码部分

！Doctype html ng-app=' a2 _ 11 '标题添加元素样式/标题脚本src=' http:/script/angular . min . js ' type=' text/JavaScript '/script style type=' text/CSS ' body { font-size :12 px } ul { margin padd :0；宽度width:408pxlist-style-type : one } ul Li { float : left；padding:5px 0 } ul。奇数{color:#0026ff} ul。甚至是{color:red} ul。bold { font-weight :700 } ul Li span { float : left；padding:0 10pxwidth :52 px } ul . focus { background-color : # CCC }/style/head body div ng-controller=' C2 _ 11 ' ul Li ng-class=' { { bold } } ' Span序列号/spanname/Span span性别/Span span是第一篇文章/span span是最后一篇文章/Span/Li Li ng-class-odd=' odd ' ' ng ' ' ng-class-偶数='偶数' ' ng-repeat=' stu in data ' ng-click=' Li _ click($ index)' ng-class='yes ' : ' no ' } }/span span { { $ last？Yes' :' no'}}/span/Li/ul/div脚本类型=' text/JavaScript ' var a2 _ 11=angular . module(' a2 _ 11 '，[])；a2_11.controller('c2_11 '，['$scope '，function($ scope){ $ scope . bold=' bold '；$ scope . Li _ click=function(I){ $ scope . focus=I；};$scope.data=[{name: '张明明'，sex3360 '女性' }，{name: '李清思'，sex: '女性' }，{name: '刘小华'，sex3360 '男性' }，{name:}]);/script/body/html1。第一，第一个li元素的‘ng-class’值绑定了‘bold’属性值，使得这个值指定的样式加粗，相信大家都能理解；

2.使用“ng类奇”和“ng类偶”样式分别绑定奇数行和偶数行，从而实现隔行变色的功能；

3.最后，我们解释如何改变被点击的li元素的颜色。在li元素的点击事件中，将执行$scope对象中添加的‘Li _ click()’方法；

在该方法中，' $index(行号值)'作为实际参数传递给方法，将' focus '的属性值设置为" $ index "；

因此，当点击一行li元素时，“焦点”的属性值会变为对应的“$ index”；

此时li元素的‘ng-class’样式指令通过键/值对象指定要添加的样式，因为当点击li元素时，‘$ index’的变量值与‘focus’的属性值相同，这意味着‘$ index==focus’的返回值为真；

这时你要明白‘ng-class’的风格指令值变成了‘focus’；

经过以上分析和操作，我们实现了点击li元素时添加背景样式的效果。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。