本文详解AngularJS中利用ng-class指令实现列表交互效果的方法。通过绑定点击事件与focus属性，结合$index实现点击行高亮；同时使用ng-class-odd和ng-class-even完成隔行换色，提供完整HTML与JS代码参考。
本文分享了AngularJS实现点击列表行添加样式及变色效果的实例代码，供参考。
AngularJS列表点击变色与隔行换色实现
需求为点击列表某行时该行背景变灰，jQuery中通过addClass即可实现，AngularJS需采用特定方式。
接下来展示具体代码实现部分。
<!doctype html>
<html ng-app="a2_11">
<head>
<title>添加元素样式</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
<style type="text/css">
body{font-size:12px}
ul{margin:0;padding:0;width:408px;list-style-type:none}
ul li{float:left;padding:5px 0}
ul .odd{color:#0026ff}
ul .even{color:red}
ul .bold{font-weight:700}
ul li span{float:left;padding:0 10px;width:52px}
ul .focus{background-color:#ccc}
</style>
</head>
<body>
<div ng-controller="c2_11">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>是否首条</span>
<span>是否尾条</span>
</li>
<li ng-class-odd="'odd'"
ng-class-even="'even'"
ng-repeat=" stu in data"
ng-click='li_click($index)'
ng-class='{focus: $index==focus}'>
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
</li>
</ul>
</div>
<script type="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: "张明明", sex: "女" },
{ name: "李清思", sex: "女" },
{ name: "刘小华", sex: "男" },
{ name: "陈忠忠", sex: "男" }
];
}]);
</script>
</body>
</html>
1、首个<li>元素的ng-class绑定bold属性，实现指定样式加粗效果。
2、利用ng-class-odd与ng-class-even分别绑定奇偶行样式，实现隔行换色。
3、解释点击<li>元素变色的实现逻辑： ①在<li>单击事件中调用$scope定义的li_click()方法；
②该方法接收$index（行号）作为参数，并将focus属性值设置为$index；
③点击某行时，focus属性值更新为对应的$index；
④此时，<li>的ng-class通过key/value对象指定样式，因$index与focus值相同，即$index==focus返回true；
⑤由此可知，ng-class样式指令值变为focus；
⑥经上述分析与操作，成功实现点击<li>元素时添加背景样式的效果。
以上内容希望对学习有所帮助，感谢支持本站。