(网页)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); ...
随机推荐
- Tools - VirtualBox的使用方法和技巧
01 - 为CentOS虚拟机安装VirtualBox增强功能 启动CentOS虚拟机,点击"菜单 -> 设备 -> 安装增强功能". vboxadd的映像文件将会被挂 ...
- mysql常用function
前言: 本文主要是参考mysql官方文档,并加上自己的测试用例,来加深自己对mysql函数的理解,也借此平台与大家分享,如有不妥和错误之处欢迎读者评论,我会及时改正,愿与大家一起学习进步. 概述: 所 ...
- 安装CDH5 hadoop2.3.0 NodeManager 没有启动
今天在安装hadoop后,启动start-yarn.sh后,nodemanager起不起来,后来查看DN节点的日志,报了以下一个错误: FATAL org.apache.hadoop.yarn.ser ...
- Apache Flume 1.7.0 源码编译 导入Eclipse
前言 最近看了看Apache Flume,在虚拟机里跑了一下flume + kafka + storm + mysql架构的demo,功能很简单,主要是用flume收集数据源(http上报信息),放入 ...
- 从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Spring Boot初识(1)-了解Spring Boot
写在前面:半年工作经验的Java程序员一枚,奈何公司用的是自研的Web框架和RPC框架,本着good good study,day day up的精神和为以后发展的考虑觉得自己需要学点开源的东西,写的 ...
- 怎么样在windows命令下创建一个没有文件名的文件?
直接上图 echo ' ' >> .aa //创建一个空字符的 .aa 的文件
- lucene-solr源码编译导入eclipse--转
https://www.jianshu.com/p/8a217ce05475 github地址:https://github.com/apache/lucene-solr 第一步:git clone ...
- spring-boot-2.0.3启动源码篇二 - run方法(一)之SpringApplicationRunListener
前言 Springboot启动源码系列还只写了一篇,已经过去一周,又到了每周一更的时间了(是不是很熟悉?),大家有没有很期待了?我会尽量保证启动源码系列每周一更,争取不让大家每周的期望落空.一周之中可 ...
- Linux C++开发学习(一)
一.简单输出 简单的小程序 1.安装g++ sudo install g++ 2.编写c++程序,helloworld.cpp #include<iostream> using names ...