(网页)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); ...
随机推荐
- SSM工作流程的大致理解
//不是根据源码来理解的,所以细节有省略.. 首先从在浏览器输入URl的那一刻开始 例如输入 localhost:8080/MyProject/listCategory 初始化: 此时tomcat已经 ...
- NodeJS简单爬虫
NodeJS简单爬虫 最近一直在追火星的一本书,然后每次都要去网站看,感觉很麻烦,于是,想起用爬虫爬取章节,务实派,说干就干! 爬取思路 1.该网站的页面呈现出一定的规律 2.使用NodeJS的req ...
- 从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- android开发(1):底部导航条的实现 | navigation tab | activity的创建
底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条. 同样,如果有良好的第三方库,我们应该优先考虑,能用好别 ...
- php获取父目录的方法 dirname()
dirname() 方法,获取父目录的方法,官方文档:http://php.net/manual/en/function.dirname.php 在 php 7.0 后,dirname() 支持两个参 ...
- mybatis中动态SQL之trim详解
一. 背景 之前mybatis中<where>.<update>.<if>.<foreach>标签用的多,知道有<trim>这个标签,但很少 ...
- JVM笔记——编译期的优化
一.编译过程 解析和填充符号表的过程 插入注解处理器的注解处理过程 语义分析与字节码生成过程 二.解析和填充符号表 解析包含两个过程:词法分析和语法分析 (一)词法分析 将源代码的字符流转变成标记(T ...
- .Net Core 简单定时任务框架封装
有段日子没有更新,写点东西冒个泡 .这篇文章过来讲个小东西,也是大家在日常开发中也经常需要面临的问题:后台定时任务处理.估计大家看到这句就已经联想到 QuartZ 等类似第三方类库了,不好意思,后边的 ...
- es6中的部分新特性
1.es6中变量声明可以使用let声明变量,用const声明常量.例: test:function(){ { var num=10; let num1=11; const num2=12; } con ...
- 5步搭建GO环境
Easy Go Programming Setup for Windows Dec 23, 2014 I’ve had to do this more than once recently, so I ...