转自脚本之家:

本篇文章主要介绍了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或者某个元素点击变色的两种方法(转)的更多相关文章

  1. 在Activity中响应ListView内部按钮的点击事件的两种方法!!!

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  2. 在Activity中响应ListView内部按钮的点击事件的两种方法

    转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在 ...

  3. SQL Server中灾难时备份结尾日志(Tail of log)的两种方法

    转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...

  4. C#统计给定的文本中字符出现的次数,使用循环和递归两种方法

    前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...

  5. windows系统中,在当前目录下打开cmd命令行的两种方法

    1.在当前路径地址栏中直接输入‘cmd’,然后回车. 2.在当前路径下,按住‘shift’键同时点击鼠标右键,点击“在此处打开Powershell”. 其实你会发现,两个命令行有很大的区别. cmd: ...

  6. Easy-UI中datebox的默认显示当前日期的最简单的两种方法

    在中有一个Today按钮就是实现显示当前日期,所以我们在src/jquery.datebox.js文件中可以找到currentText:'Today'.所以我们可以使用'currentText'和'T ...

  7. Android中Intent传递对象的两种方法(Serializable,Parcelable)

    今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...

  8. [转]Android中Intent传递对象的两种方法(Serializable,Parcelable)

    http://blog.csdn.net/xyz_lmn/article/details/5908355 今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种 ...

  9. Android高手进阶教程(十七)之---Android中Intent传递对象的两种方法(Serializable,Parcelable)!

    [转][原文] 大家好,好久不见,今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object); ...

随机推荐

  1. Windows.UI.Cred.dll损坏导致不能设置 PIN 密码

    心血来潮,重装系统. 然后发现不能设置 PIN,UWP界面在输完两个PIN后直接卡死(第一次设置的时候不需要输入第一行的PIN) google无果,打开系统日志,发现 上网下载一个对应版本的Windo ...

  2. Maven - 实例-1-手工创建Maven项目

    1- 根据包结构创建maven项目目录 TestMaven - src - src/main/java/anliven/testmaven01/HelloMaven.java - src/test/j ...

  3. Docker - 常用基础命令

    Docker命令分布 帮助信息 查看docker基本信息:docker info 查看docker版本信息:docker version 查看docker的所有命令及选项:docker --help ...

  4. Liferay7 BPM门户开发之3: Activiti开发环境搭建

    下载地址: http://activiti.org/download.html 源码: https://github.com/Activiti/Activiti 环境准备(检查项): JDK 1.7 ...

  5. Python函数——装饰器

    前言 给下面的函数加上运行时间 def fib(n): a, b = 0, 1 for i in range(n): print(b) a, b = b, a+b return b a = fib(5 ...

  6. IMEI

    IMEI(International Mobile Equipment Identity)是国际移动设备身份码的缩写,国际移动装备辨识码,是由15位数字组成的"电子串号",它与每台 ...

  7. [转]谈谈Java中"=="与"equals()"

    equals是Object超类中的一个方法,这个方法的实现就是通过==号实现的,==号比较的是两个对象的地址是否相同,在代码中体现出来就是比较两个对象引用中保存的地址是否相同,==能够判断的只是两个对 ...

  8. Vxlan学习笔记——实现

    1. 创建NVI NVI(Network Virtual Instance)网络虚拟实例,是VTEP上为一个VXLAN提供L2交换服务的虚拟交换实例,NVI和VXLAN ID一一对应.别和VNI混了. ...

  9. FFmpeg时间戳详解

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10584910.html 1. I帧/P帧/B帧 I帧:I帧(Intra-coded pi ...

  10. kali网卡配置文件

    kali的网卡配置文件为/etc/network/interfaces 下面定义了lo.eth0和eth1的配置 auto lo # auto表示开机启动该网卡设备 iface lo inet loo ...