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 20 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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模块memcache和memcached区别分析
2011/06/14 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
vue-router命名视图的使用讲解
2019/01/19 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python 文件查找及内容匹配方法
2018/10/25 Python
pandas如何处理缺失值
2019/07/31 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
本科毕业生应聘求职信
2014/07/06 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
预备党员半年考察意见
2015/06/01 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android