转自脚本之家:

本篇文章主要介绍了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. Spring.Net实现跨数据库服务层事务管理

    在实际项目中用了Spring.Net框架之后,发现这框架在处理数据库事务上特别强大,声明式的数据库事务解放了一般开发人员对数据库事务操作的复杂处理.尤其是多数据库事务处理上,尤为显得更简便,几个简单的 ...

  2. Ubuntu16.04 + gtx1060 + cuda8.0 + cudnn5.1 + caffe + Theano + Tensorflow

    参考 ubuntu16.04+gtx1060+cuda8.0+caffe安装.测试经历 ,细节处有差异. 首先说明,这是在台式机上的安装测试经历,首先安装的win10,然后安装ubuntu16.04双 ...

  3. VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)

    vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...

  4. 从零开始学 Web 之 CSS3(四)边框图片,过渡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. IDEA之Git分支以及Stash使用

    访问我的博客 随着公司开发人员的增加,以及多需求的并行开发,功能上线就会碍手碍脚:害怕自己没写完的代码被别人部署到线上,害怕别人代码没写完被自己部署到线上:总之功能上线之前还要和所有开发沟通,能不能部 ...

  6. leetcode — reverse-nodes-in-k-group

    /** * Source : https://oj.leetcode.com/problems/reverse-nodes-in-k-group/ * * Created by lverpeng on ...

  7. Ubuntu14.04 编译 Android 5.1.1源码(采用国内镜像)

    欢迎转载,转载请注明出处: http://www.cnblogs.com/lanrenxinxin/p/5424554.html 之前就有编译android源码的想法,但是由于有GFW的存在,又没有梯 ...

  8. CSS hack兼容表

    IE6 IE7 IE8 Firefox Opera Safari !important Y Y Y Y Y _ Y * Y Y *+ Y \9 Y Y Y \0 Y nth-of-type(1) Y ...

  9. 实验吧 貌似有点难 伪造ip

    解题链接: http://ctf5.shiyanbar.com/phpaudit/ 解答: 点击View the source code —>代码显示IP为1.1.1.1即可得到KEY—> ...

  10. 深度学习之PyTorch实战(2)——神经网络模型搭建和参数优化

    上一篇博客先搭建了基础环境,并熟悉了基础知识,本节基于此,再进行深一步的学习. 接下来看看如何基于PyTorch深度学习框架用简单快捷的方式搭建出复杂的神经网络模型,同时让模型参数的优化方法趋于高效. ...