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 相关文章推荐
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 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命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python gdal安装与简单使用
2019/08/01 Python
Python实现数值积分方式
2019/11/20 Python
浅谈Python协程
2020/06/17 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
django中ImageField的使用详解
2020/12/21 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
css3 border-image使用说明
2010/06/23 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
节水口号标语
2014/06/19 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android