angular中实现li或者某个元素点击变色的两种方法


Posted in Javascript onJuly 27, 2017

本文介绍了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=1;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jquery插件validate验证的小例子
May 08 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
快速入门Vue
Dec 19 Javascript
layui导航栏实现代码
May 19 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 #Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 #Javascript
You might like
浅析php学习的路线图
2013/07/10 PHP
php文件上传的简单实例
2013/10/19 PHP
php多文件上传实现代码
2014/02/20 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
js简易版购物车功能
2017/06/17 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python PyTorch预训练示例
2018/02/11 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
安踏官方商城:anta.cn
2019/12/16 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
2014年采购部工作总结
2014/11/20 职场文书
学生会个人总结范文
2015/02/15 职场文书
修辞手法有哪些?
2019/08/29 职场文书