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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 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
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python Socket编程入门教程
2014/07/11 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Flask框架web开发之零基础入门
2018/12/10 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
自荐信的格式
2014/03/10 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python