(网页)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); ...
随机推荐
- div、span内容超出省略号
span设置部分省略...: span{ overflow: hidden; text-overflow: ellipsis; -o-text-over ...
- js设计模式小结
1 构造函数模式 var Person = function(name){ this.name = name; this.getName = function(){ console.log(this. ...
- url参数+,&,=,/等转义编码
url出现了有+,空格,/,?,%,#,&,= 等特殊符号的时候,可能在服务器端无法获得正确的参数值. 案例: <img src="BarCode39.aspx?barcode ...
- 在Hadoop集群上的Hive配置
1. 系统环境Oracle VM VirtualBoxUbuntu 16.04Hadoop 2.7.4Java 1.8.0_111 hadoop集群master:192.168.19.128slave ...
- Emgucv学习系列之环境搭建
Emgucv功能介绍 Emgucv是跨平台的,是Opencv的.net版本.可以对图片.视频等多媒体资源进行加工处理的SDK库. Emgucv下载和安装SDK 下载地址:https://sourcef ...
- web框架的前生今世--从servlet到spring mvc到spring boot
背景 上世纪90年代,随着Internet和浏览器的飞速发展,基于浏览器的B/S模式随之火爆发展起来.最初,用户使用浏览器向WEB服务器发送的请求都是请求静态的资源,比如html.css等. 但是可 ...
- linux下xdebug的安装和配置方法
xdebug简介 Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. xdebug安装 首先让php错误显示,只需要修改php.in ...
- Vxlan学习笔记——原理
1. 为什么需要Vxlan 普通的VLAN数量只有4096个,无法满足大规模云计算IDC的需求,而IDC为何需求那么多VLAN呢,因为目前大部分IDC内部结构主要分为两种L2,L3.L2结构里面,所有 ...
- C# GDI+编程之绘图
在了解绘图之前,我们先讲几个预备知识 一.坐标系 坐标系是图形设计的基础.GDI+使用三个坐标空间:世界.页面和设备,其中,世界坐标是用于建立特殊图形世界模型的坐标系,也是在.NET Framewor ...
- K均值聚类
聚类(cluster)与分类的不同之处在于, 分类算法训练过程中样本所属的分类是已知的属监督学习. 而聚类算法不需要带有分类的训练数据,而是根据样本特征的相似性将其分为几类,又称为无监督分类. K均值 ...