angularjs中的ng-class的几种使用方式_[ngclass]="{'active': active == 1}" role="tab" 筛选

作者：小丑西瓜9 | 2024-04-16 20:01:18

踩

[ngclass]="{'active': active == 1}" role="tab" 筛选

第一种:


 <!-- 直接使用变量-->
<div ng-class="styleClass"></div>

$scope.styleClass = 'active';

第二种:


<!--第二种  用{{}}使用表达式-->  
<div ng-class="{{bgClass}}"></div>

$scope.bgClass = "{'red':true,'green':false}"

第三种:


<-- 动态添加类名 -->
<-- 写法一 -->
<div ng-class="{'active': isActive, 'inactive': !isActive}">ABCDEFG</div>
 
<-- 写法二-->
<div ng-class="{'active': isActive&&hover, 'active': !isActive&&!hover}">ABCDEFG</div>
 
<--  写法三-->
<div ng-class="{true :'active', false :'inactive'}[isActive]">ABCDEFG</div>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/436175

angularjs中的ng-class的几种使用方式_[ngclass]="{'active': active == 1}" role="tab" 筛选

引入图片