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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
JS实现瀑布流效果
Mar 07 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脚本的10个技巧(5)
2006/10/09 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
跟老齐学Python之print详解
2014/09/28 Python
使用python生成目录树
2018/03/29 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Python 支持向量机分类器的实现
2020/01/15 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
应届生法律求职信
2013/10/22 职场文书
教师开学感言
2014/02/14 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python