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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
vue实现移动端省市区选择
Sep 27 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP操作文件方法问答
2007/03/16 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
Seajs的学习笔记
2014/03/04 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python中使用asyncio 封装文件读写
2016/09/11 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Django ModelForm操作及验证方式
2020/03/30 Python
python实现猜拳游戏项目
2020/11/30 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
毕业生的自我鉴定
2013/10/29 职场文书
学校安全教育制度
2014/01/31 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
写字楼租赁意向书
2014/07/30 职场文书
教师读书活动心得体会
2016/01/14 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript