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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
拖动时防止选中
Feb 03 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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
德生9700DX电路分析
2021/03/02 无线电
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
浅析python的优势和不足之处
2018/11/20 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
小学生优秀评语大全
2014/04/22 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python