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的使用区别
赞 (0)

相关推荐

  • angularjs指令中的compile与link函数详解

    angularjs指令中的compile与link函数详解

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建

  • 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基础 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-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结合Bootstrap制作的一个TODO List

    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 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标签弹出对应的索引功能【案例】

    本文实例讲述了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实现表格中点击相应行变色功能效果【实例代码】

    jquery实现表格中点击相应行变色功能效果【实例代码】

    对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

  • vue组件中点击按钮后修改输入框的状态实例代码

    vue组件中点击按钮后修改输入框的状态实例代码

    最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>

  • JavaScript使用ul中li标签实现删除效果

    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时键盘自动弹出

    ionic开发移动端界面时,在输入用户名和密码的时候,我希望输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,只是input内容部分往上移动,点击密码输入框时我还想看见按钮,这样不用关闭输入法,也可以直接点击登录按钮,关闭输入法自动恢复成默认的界面,用户体验不错哦~:找了很多代码,以下代码是我想要的效果: .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPositi

  • PHP将页面中点击数量高的链接进行高亮显示的方法

    背景和需求 就好比说页面导航的左侧是分类,分类下面有很多链接.我现在想统计所有分类下面点击次数最多的一个,并把其颜色做特殊处理! 大致的数据结构如下: { "content": [ { "id": "1", "name": "htmldrive", "url": "http://www.htmldrive.net/", "cate": "

随机推荐