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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

angular4中关于表单的校验示例
本篇文章主要介绍了angular4中关于表单的校验示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Spartacus CMS Feature selector的实现解析
这篇文章主要为大家介绍了Spartacus CMS Feature selector的实现解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-07-07
Angular应用prerender预渲染提高页面加载速度
这篇文章主要介绍了Angular应用prerender预渲染提高页面加载速度,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
详解Angular-ui-BootStrap组件的解释以及使用
这篇文章主要介绍了详解Angular-ui-BootStrap组件的解释以及使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Angular Ngrx Store应用程序状态典型示例详解
这篇文章主要为大家介绍了Angular Ngrx Store应用程序状态典型示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
Angular实现表格自滚动效果
这篇文章主要为大家介绍了如何通过Angular实现表格自动滚动的效果，文中的示例代码讲解详细，对我们学习Angular有一定帮助，需要的可以参考一下
2022-01-01
angularjs实现时间轴效果的示例代码
本篇文章主要介绍了angularjs实现时间轴效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
老生常谈angularjs中的$state.go
下面小编就为大家带来一篇老生常谈angularjs中的$state.go。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
Angular(5.2->6.1)升级小结
今天小编就为大家分享一篇关于Angular(5.2->6.1)升级小结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12
详解AngularJs ui-router 路由的简单介绍
本篇文章主要介绍了AngularJs ui-router 路由的简单介绍。简单明了的说明了ngRoute和ui-router的区别和用法，有兴趣的可以了解一下
2017-04-04