(网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家:
本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下
本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助
先说一种最直接了当的不需要js控制。
方法一:直接在用ng-class就可以控制:
<p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p>
<p ng-click="state=2;" ng-class="{active:state==2}">忧伤说笑</p>
在style里面设置如下:
<style type="text/css">
.active{
color:red;
}
</style>
这样就会点哪个哪个变色了。
方法二:style同上,hetml如下:
<div ng-controller="active">
<p ng-click="isActive(1)" class="{{i==1?'active':''}}">剧情再美</p>
<p ng-click="isActive(2)" class="{{i==2?'active':''}}">终究是戏</p>
</div>
js代码如下:
$scope.isActive=function(i){
$scope.i=i;
}
若想要第一个默认为有颜色的,则在js里面加如下即可:
$scope.i=;
原文地址:http://www.jb51.net/article/119737.htm
(网页)angular中实现li或者某个元素点击变色的两种方法(转)的更多相关文章
- 在Activity中响应ListView内部按钮的点击事件的两种方法!!!
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- 在Activity中响应ListView内部按钮的点击事件的两种方法
转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...
- SQL Server中灾难时备份结尾日志(Tail of log)的两种方法
转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...
- C#统计给定的文本中字符出现的次数,使用循环和递归两种方法
前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...
- windows系统中,在当前目录下打开cmd命令行的两种方法
1.在当前路径地址栏中直接输入‘cmd’,然后回车. 2.在当前路径下,按住‘shift’键同时点击鼠标右键,点击“在此处打开Powershell”. 其实你会发现,两个命令行有很大的区别. cmd: ...
- Easy-UI中datebox的默认显示当前日期的最简单的两种方法
在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'.所以我们可以使用'currentText'和'T ...
- Android中Intent传递对象的两种方法(Serializable,Parcelable)
今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...
- [转]Android中Intent传递对象的两种方法(Serializable,Parcelable)
http://blog.csdn.net/xyz_lmn/article/details/5908355 今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种 ...
- Android高手进阶教程(十七)之---Android中Intent传递对象的两种方法(Serializable,Parcelable)!
[转][原文] 大家好,好久不见,今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object); ...
随机推荐
- Testing - 软件测试知识梳理 - 测试分类
参考信息 软件测试分类 经典软件测试技术分类 软件测试方法汇总 简洁分类 对软件内部结构的深入程度 黑盒测试:又叫功能测试.数据驱动测试或基于需求规格说明书的功能测试. 该测试类别注重于测试软件的功能 ...
- python tricks
1. cities = ['Marseille', 'Amsterdam', 'New York', 'Londom'] # the good way for i, city in enumerate ...
- druid的关键参数+数据库连接池运行原理
minEvictableIdleTimeMillis :连接保持空闲而不被驱逐的最长存活时间.(默认30分钟) Destory线程中如果检测到当前连接的最后活跃时间和当前时间的差值大于minEvi ...
- spring boot 集成jsp
刚开始操作的时候,遇到了个问题,在这记录一下.(因为自己是个新手,对maven项目结构不了解) 1.大概创建步骤如下 File-New-Project-Spring Initializr ,type选 ...
- canvas图片上传相关学习
今天主要是研究了canvas的关于图片上传的相关知识, context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
- Linux编程 1 (文件系统路径说明, 目录结构说明)
一. Linux文件系统路径说明 熟悉windows系统的,都知道文件路径表示,如C:\User\rich\Documnets\test.doc. 在linux中目录称为虚拟目录(virtual di ...
- 从零开始学 Web 之 CSS(一)选择器
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- Shell脚本 | 性能测试之内存
性能测试中,内存是一个不可或缺的方面.比如说在跑 Monkey 的过程中,如何准确持续的获取到内存数据就显得尤为重要. 今天分享一个脚本,可以在给定时间内持续监控内存,最后输出成一份 CSV 文件,通 ...
- Hadoop2源码分析-YARN RPC 示例介绍
1.概述 之前在<Hadoop2源码分析-RPC探索实战>一文当中介绍了Hadoop的RPC机制,今天给大家分享关于YARN的RPC的机制.下面是今天的分享目录: YARN的RPC介绍 Y ...
- Eureka安全认证
Eureka 服务加入安全认证只需要在之前的服务中增加三处步骤即可: 1.在Eureka Server中加入spring-boot-starter-security依赖 <dependencie ...