angular中实现li或者某个元素点击变色的两种方法
更新时间：2017年07月27日 11:48:12 作者：赵海辛
本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法，非常具有实用价值，需要的朋友可以参考下
本文介绍了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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于angular使用TweenMax的相关问题和解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
下面小编就为大家带来一篇angular ng-repeat数组中的数组实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目，本文通过实例代码给大家分享Angular环境搭建及简单体验，感兴趣的朋友跟随小编一起学习吧2021-05-05
Angular2使用SVG自定义图表（条形图、折线图）组件示例
这篇文章主要介绍了Angular2使用SVG自定义图表（条形图、折线图）组件,涉及Angular结合svg进行图表绘制的相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要为大家介绍了monaco editor在Angular的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了AngularJS 过滤与排序，这里整理了详细的资料及简单实例代码，有需要的小伙伴可以参考下2016-09-09
spy 是一种检查函数是否被调用或提供自定义返回值的方法,我们可以使用spy 来测试依赖于服务的组件,并避免实际调用服务的方法来获取值,在本文中,您将学习如何在 Angular 项目中使用 Jasmine spy,需要的朋友可以参考下2024-03-03
本篇文章主要介绍了angular2路由切换改变页面title的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Angular7实现拖放Drag Drop示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-12-12
本篇文章主要介绍了Angularjs的启动过程分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论