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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
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
PHP读取XML值的代码(推荐)
2011/01/01 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
srcElement表格样式
2006/09/03 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
js实现微信聊天界面
2020/08/09 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python栈类实例分析
2015/06/15 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python通过http下载文件的方法详解
2019/07/26 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
参观考察邀请函范文
2014/01/29 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
元旦晚会策划方案
2014/02/18 职场文书
合作协议书模板
2014/10/10 职场文书
基层党组织整改方案
2014/10/25 职场文书
铣工实训报告
2014/11/05 职场文书
升学宴学生答谢词
2015/01/05 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书