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 相关文章推荐
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JS中字符串trim()使用示例
May 26 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
vue ref如何获取子组件属性值
Mar 31 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
拼音码表的生成
2006/10/09 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
浅析javascript 定时器
2014/12/23 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python中Class类用法实例分析
2015/11/12 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python实现求数列和的方法示例
2018/01/12 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
工艺员岗位职责
2014/02/11 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
药剂专业求职信
2014/06/20 职场文书
五四青年节活动总结
2015/02/10 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
python自动化八大定位元素讲解
2021/07/09 Python