Angular中点击li标签实现更改颜色的核心代码
更新时间：2017年12月08日 14:41:11 作者：阿布_0caf
这篇文章主要介绍了Angular中点击li标签实现更改颜色的核心代码,需要的朋友可以参考下
点击ng-repeat遍历后的li标签，实现更改border颜色；
html代码：
<ul ng-if="params.questionTypeId == 8">
<li class="gamePre-def" ng-repeat=" word in wordsDef" ng-click='li_click($index)'
ng-class='{focus: $index == focus}'> {{word}}</li>
</ul>
js代码：
$scope.li_click = function (i) {
$scope.focus = i;
};
说明：
①在< 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 >元素时,添加border的效果.
css样式：
ul .focus {
border: 1px solid blue;
}
总结
以上所述是小编给大家介绍的Angular中点击li标签实现更改颜色，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
相信在大家已经学习了足够多关于AngularJS的知识后，就可以开始创建第一个AngularJS应用程序，这篇文章通过示例给大家介绍如何利用Angular.js限制textarea输入的字数，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
这篇文章主要给大家介绍了Angular2入门教程之模块和组件的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
本文给大家总结了一些angularjs的基础知识及相关示例，分享给大家，希望能对大家有所帮助。2015-01-01
本文主要介绍AngularJS ng-value 指令,这里对ng-value 的基础资料做了整理，并附实例代码，有需要的小伙伴可以参考下2016-08-08
Angular.js与Bootstrap相结合实现手风琴菜单代码
这篇文章主要介绍了Angular.js与Bootstrap相结合实现手风琴菜单的相关资料,需要的朋友可以参考下2016-04-04
Angularjs实现带查找筛选功能的select下拉框示例代码
这篇文章主要介绍了Angularjs实现带查找筛选功能的select下拉框的详细过程及示例代码，文中通过示例介绍的很详细，相信会对大家学习使用Angularjs具有一定的参考借鉴价值，有需要的朋友们可以一起来看看。2016-10-10
这篇文章主要为大家介绍了angularJS实现长按不触发点击事件可以复制剪贴方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
使用AngularJS的过滤器，可以很容易的实现在表格中，点击某一列标题进行排序，实现代码也很简单，下面小编给大家分享angularjs实现表格按指定列排序的实现代码，需要的的朋友参考下吧2017-06-06
AngularJS使用ng-app自动加载bootstrap框架问题分析
这篇文章主要介绍了AngularJS使用ng-app自动加载bootstrap框架问题,分析了前面文章中所述的ng-app自动加载bootstrap出现的错误原因与相应的解决方法,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下2014-12-12
最新评论