AngularJS点击添加样式、点击变色设置的实例代码


Posted in Javascript onJuly 27, 2017

本文介绍了AngularJS点击添加样式、点击变色设置的实例代码,分享给大家,具体如下:

首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在JQ中,大家都知道,这是非常容易的,加一个addClass就行了,那么AngularJS如何实现呢?

AngularJS点击添加样式、点击变色设置的实例代码

下面我们看代码部分

<!doctype html>
<html ng-app="a2_11">
<head>
  <title>添加元素样式</title>
  <script src="../Script/angular.min.js"
      type="text/javascript"></script>
<style type="text/css">
  body{font-size:12px}
  ul{margin:0;padding:0;width:408px;list-style-type:none}
  ul li{float:left;padding:5px 0}
  ul .odd{color:#0026ff}
  ul .even{color:red}
  ul .bold{font-weight:700}
  ul li span{float:left;padding:0 10px;width:52px}
  ul .focus{background-color:#ccc}
</style>
</head>
<body>
  <div ng-controller="c2_11">
    <ul>
      <li ng-class="{{bold}}">
        <span>序号</span>
        <span>姓名</span>
        <span>性别</span>
        <span>是否首条</span>
        <span>是否尾条</span>
      </li>
      <li ng-class-odd="'odd'"
        ng-class-even="'even'"
        ng-repeat=" stu in data"
        ng-click='li_click($index)'
        ng-class='{focus: $index==focus}'>
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{$first?'是':'否'}}</span>
        <span>{{$last?'是':'否'}}</span>
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    var a2_11 = angular.module('a2_11', []);
    a2_11.controller('c2_11', ['$scope', function ($scope) {
      $scope.bold = "bold";
      $scope.li_click = function (i) {
        $scope.focus = i;
      };
      $scope.data = [
      { name: "张明明", sex: "女" },
      { name: "李清思", sex: "女" },
      { name: "刘小华", sex: "男" },
      { name: "陈忠忠", sex: "男" }
      ];
    }]);
  </script>
</body>
</html>

1、首先,第一个< li >元素的"ng-class"值与"bold"属性值绑定,使得该值指定的样式加粗,这个相信大家都能看懂;

2、使用“ng-class-odd”和"ng-class-even"样式分别绑定奇数和偶数行的样式,从而实现了隔行换色的功能;

3、最后我们解释一下,如何使得所点击的< li >元素变色
 ①在< 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 >元素时,添加背景样式的效果.

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
javascript控制台详解
Jun 25 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JS 自执行函数原理及用法
Aug 05 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 #Javascript
Vue2.0如何发布项目实战
Jul 27 #Javascript
在Vue中如何使用Cookie操作实例
Jul 27 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Django开发中的日志输出的方法
2018/07/02 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
会计实习自我鉴定
2013/12/04 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python