【angular基础】ng-class的几种用法

单个变量

$scope.className = 'active';

<--变量-->
<div ng-class="className">商品标题</div>

<--字符串-->
<div class="active">商品标题</div>
<div ng-class="'active'">商品标题</div>

多个变量

$scope.classNameList = [ 'active', ' hot'];
$scope.className1 = 'active';
$scope.className2 = 'hot';

<div ng-class="[className1, className2]">商品标题</div>

<-- 将整个数组作为变量 -->
<div ng-class="classNameList">商品标题</div>

动态添加类名

这里仅列出各种写法，具体可根据项目情况选取方便实用的方法

<-- 写法一 -->
<div ng-class="{'hot active': isActive, 'title': !isActive}">商品标题</div>

<-- 写法二-->
<div ng-class="{'title': true, 'active': isActive}">商品标题</div>

<--  写法三-->
<div ng-class="{true: 'hot active', false: 'title'}[isActive]"></div>

<--  其他表达式  不推荐 -->
<div ng-class="isShow?'title active':'title'">商品标题</div>

ng-repeat里的ng-class与ng-class-odd

<-- ng-repeat里的巧用 -->
<ul>
	<li ng-class="{'text-info': $even, 'text-danger': $odd }" ng-repeat="item in list">{{ item.name }}</li>
</ul>

<-- 也可以直接使用ng-class-odd  -->
<ul>
	<li ng-class-odd="'text-danger'" ng-repeat="item in list">{{item.name}}</li>
</ul>

参考链接： AngularJS之ng-class用法 https://www.imooc.com/article/26107