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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 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使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
简单谈谈React中的路由系统
2017/07/25 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
光电信息专业应届生求职信
2013/10/07 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
办公室文员自荐书
2014/02/03 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
工商干部先进事迹
2014/05/14 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
会计求职自荐信
2015/03/26 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
监护人证明
2015/06/19 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫