Angular中点击li标签实现更改颜色的核心代码


Posted in Javascript onDecember 08, 2017

点击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标签实现更改颜色,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
Javascript中的作用域及块级作用域
Dec 08 #Javascript
Vue中自定义全局组件的实现方法
Dec 08 #Javascript
Vue中的Vux配置指南
Dec 08 #Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 #Javascript
vue axios 二次封装的示例代码
Dec 08 #Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 #Javascript
js断点调试心得分享(必看篇)
Dec 08 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
初学Python实用技巧两则
2014/08/29 Python
Python实现子类调用父类的方法
2014/11/10 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python简单区块链模拟详解
2019/07/03 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
python logging.info在终端没输出的解决
2020/05/12 Python
聊聊python中的异常嵌套
2020/09/01 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
自我鉴定的范文
2013/10/03 职场文书
教师自我鉴定范文
2013/11/10 职场文书
勤俭节约倡议书
2014/04/14 职场文书
图书借阅制度范本
2015/08/06 职场文书