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指令中的compile与link函数详解
- AngularJS基础 ng-click 指令示例代码
- AngularJS基础 ng-dblclick 指令用法
- AngularJS基础 ng-list 指令详解及示例代码
- Angularjs结合Bootstrap制作的一个TODO List
- 浅谈Angularjs link和compile的使用区别
相关推荐
-
Angularjs结合Bootstrap制作的一个TODO List
看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应用).为了增强理解,下面写了一篇文章,用以复习巩固. 准备 Angularjs下载 说是下载,其实只要能在我们的页面中引用到Angularjs即可.可以有如下方式. CDN加速 使用国内的CDN加速服务也是可以的. 复制代码 代码如下: <script src="http://code.angularjs.org/angular-1.0.
-
angularjs指令中的compile与link函数详解
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建
-
AngularJS基础 ng-list 指令详解及示例代码
AngularJS ng-list 指令 AngularJS 实例 转换用户的输入为数组: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <
-
AngularJS基础 ng-click 指令示例代码
AngularJS ng-click 指令 AngularJS 实例 按钮每次点击时,计数变量 count 自动加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l
-
AngularJS基础 ng-dblclick 指令用法
AngularJS ng-dblclick 指令 AngularJS 实例 在每次鼠标双击时,变量 count 加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l
-
浅谈Angularjs link和compile的使用区别
compile 想在dom渲染前对它进行变形,并且不需要scope参数 想在所有相同directive里共享某些方法,这时应该定义在compile里,性能会比较好 返回值就是link的function,这时就是共同使用的时候 link 对特定的元素注册事件 需要用到scope参数来实现dom元素的一些行为 以上就是小编为大家带来的浅谈Angularjs link和compile的使用区别全部内容了,希望大家多多支持我们~
-
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}}<
-
JS实现点击li标签弹出对应的索引功能【案例】
本文实例讲述了JS实现点击li标签弹出对应的索引功能.分享给大家供大家参考,具体如下: 需求:点击li标签,弹出对应的索引 先看效果: html结构: <ul id="ul1"> <li>我是li标签1</li> <li>我是li标签2</li> <li>我是li标签3</li> <li>我是li标签4</li> <li>我是li标签5</li> <
-
jquery实现表格中点击相应行变色功能效果【实例代码】
对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
-
vue组件中点击按钮后修改输入框的状态实例代码
最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>
-
JavaScript使用ul中li标签实现删除效果
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul { list-style: none; } li { background-color: #ddd; margin-top: 2px; } li:
-
js实现点击按钮随机生成背景颜色
本文实例为大家分享了js实现点击按钮随机生成背景颜色的具体代码,供大家参考,具体内容如下 通过点击按钮更换整个页面的背景颜色 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
-
angular中实现li或者某个元素点击变色的两种方法
本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo
-
Jquery和JS获取ul中li标签的实现方法
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN
-
ionic开发中点击input时键盘自动弹出
ionic开发移动端界面时,在输入用户名和密码的时候,我希望输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,只是input内容部分往上移动,点击密码输入框时我还想看见按钮,这样不用关闭输入法,也可以直接点击登录按钮,关闭输入法自动恢复成默认的界面,用户体验不错哦~:找了很多代码,以下代码是我想要的效果: .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPositi
-
PHP将页面中点击数量高的链接进行高亮显示的方法
背景和需求 就好比说页面导航的左侧是分类,分类下面有很多链接.我现在想统计所有分类下面点击次数最多的一个,并把其颜色做特殊处理! 大致的数据结构如下: { "content": [ { "id": "1", "name": "htmldrive", "url": "http://www.htmldrive.net/", "cate": "
随机推荐
- JAVA基础之继承(inheritance)详解
- 浅析Oracle中的不等于号
- python实现的简单RPG游戏流程实例
- VMware搭建虚拟机服务器
- JS中encodeURIComponent函数用php解码的代码
- 使用Apache的htaccess防止图片被盗链的解决方法
- PHP统一页面编码避免乱码问题
- docker测试时候命令无法补全的解决方法
- Smarty3配置及入门语法
- 使用jQuery处理AJAX请求的基础学习教程
- C语言编程中的联合体union入门学习教程
- php数组实现根据某个键值将相同键值合并生成新二维数组的方法
- Java,C#使用二进制序列化、反序列化操作数据
- 在Linux中使用MD5实现用户验证的解决方法
- JVM 心得 OOM时的堆信息获取方法与分析
- PHP curl 获取响应的状态码的方法
- 在Jsp Servlet中页面重新定向总汇
- 入门典籍之Linux用户安全
- PHP分页显示的方法分析【附PHP通用分页类】
- vue超时计算的组件实例代码