热门：华为支持参数分辨率解决方法控制属性启动升级错误平台推荐步骤模式查询运行空间文件夹鼠标图标重启激活联想检查状态应用程序

Angular中点击li标签实现更改颜色的核心代码

2023-01-22 09:58:52

Angular中点击li标签实现更改颜色的核心代码

这篇文章主要介绍了Angular中点击li标签实现更改颜色的核心代码,需要的朋友可以参考下

点击ng-repeat遍历后的li标签，实现更改border颜色；

html代码：

 
     
  •  {{word}}

js代码：

 $scope.li_click = function (i) { $scope.focus = i; };

说明：

①在

  • 元素的单击事件中，将执行$scope对象中添加的"li_click()"方法;

    ②在该方法中将"$index(行号值)"作为实参传给方法，并将"focus"属性值设为“$index”值；

    ③因此当单击某行

  • 元素时,"focus"属性值将变为相应的"$index"；

    ④此时,

  • 元素的"ng-class"样式指令通过key/value对象的方式指定该元素需要添加的样式,由于单击
  • 元素时，"$index"变量值和"focus"属性值相同，也就是说"$index==focus"的返回值为true；

    ⑤此时您应该明白了，"ng-class"的样式指令值变为"focus";

    ⑥经过上面的分析及操作，我们实现了单击

  • 元素时,添加border的效果.

    css样式：

     ul .focus { border: 1px solid blue; }

    总结

    • 以上就是Angular中点击li标签实现更改颜色的核心代码的详细内容，更多请关注易知道|edz.cc其它相关文章！

    标签核心参考遍历对象

    推荐阅读