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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
python赋值操作方法分享
2013/03/23 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
appium+python adb常用命令分享
2020/03/06 Python
Python中的流程控制详解
2021/02/18 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
高校十八大报告感想
2014/01/27 职场文书
学校火灾防控方案
2014/06/09 职场文书
初中学生操行评语
2014/12/26 职场文书
数学教师个人总结
2015/02/06 职场文书
资金申请报告范文
2015/05/14 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android