源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AngularJS中关于ng-class指令的几种实现方式详解

  • 时间:2021-01-25 09:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AngularJS中关于ng-class指令的几种实现方式详解
[b]前言[/b] 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其[code]css[/code]的属性,而实现动态的改变属性值,我们就需要实现动态的更换其[code]class[/code]属性值。 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看。 [b]第一种:通过数据的双向绑定(不推荐)[/b]
<div ng-controller="firstController">
  <div ng-class="{{className}}"></div>

</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className='change';

   })
</script>
网上各种不推荐,说实话,既然angularJS双向数据绑定这么吊,为什么不能通过这个来改变呢!查了下原由:“在[code]controller[/code]涉及了[code]classname[/code]在我看来是乎总是那么诡异,我希望的是[code]controller[/code]是一个干净的纯javascript意义的[code]object[/code]”,当然并没有明文固定不能够这么使用的,而且反而我觉得这样非常的方便,让html中元素想怎么变就怎么变!同理中的[code]img[/code]元素中的[code]src[/code]就不可以通过别的来改变,但是通过这种方式就是可以的!当然,这种方式也的确给人的感觉怪怪的,个人认为:可以不得已而为之~ [b]第二种:通过对象数组[/b]
<div ng-controller="firstController">

 <div ng-class="{true:'change1',false:'change2'}[className]"></div>


</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className=true;

   })
</script>
实现很简单,就是当[code]className[/code]为[code]true[/code]的时候[code]class[/code]为[code]change1[/code],相反则为[code]change2[/code]。 但是有一点不好的只能够让一个元素拥有两种状态,虽然这么说!基本也是满足所需了,我一般都用这个。简单、直观! [b]第三种:通过key/value[/b]
<div ng-controller="firstController">

  <div ng-class="{'change1':select,'change2':choice,'change3':lala}">

</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.select=true;
     $scope.lala=true;

   })
</script>
当[code]lala[/code]为[code]true[/code]的时候,[code]class[/code]则为[code]change3[/code],个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~ [b]总结[/b] 我们如果在项目中可以灵活的运用这些指令会给我们带来非常多的便利,我们在解决问题的时候能有更多的思路,这样我们可以组合的使用这些指令来快速的解决一些比较苦恼的问题!以上就是这篇文章的全部内容,希望能对大家想学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部