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 HTTP响应拦截器的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要为大家介绍了详解如何在Angular中引入Mock.js实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了Angular5中状态管理的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
AngularJs IE Compatibility 兼容老版本IE
本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法，有兴趣的小伙伴可以参考下2016-09-09
AngularJS $on、$emit和$broadcast的使用
本文主要介绍AngularJS $on、$emit和$broadcast的使用,这里整理了详细的资料及简单示例代码有兴趣的小伙伴可以参考下2016-09-09
Angular Universal 主要关注将 Angular App 如何进行服务端渲染和生成静态 HTML，对于用户交互复杂的 SPA 并不推荐使用 SSR，本文是在 Angular 14 环境中完成，有些内容对于新的 Angular 版本可能并不适用，感兴趣的朋友一起通过本文学习2022-11-11
随着javaEE的spring框架的兴起，依赖注入（IoC）的概念彻底深入人心，它彻底改变了我们的编码模式和思维。在AngularJS中也有依赖注入的概念，像spring中的依赖注入，但是又有所不同。Angular中只需要在需要的地方声明一下即可，类似模块的引用，因此十分方便。2016-10-10
每个Angular版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里，本文将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。2021-05-05
这篇文章主要介绍了angular6 填坑之sdk的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要介绍了Angular2学习笔记之数据绑定的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论