ng-class

Posted 2020-09-23

有一个小的需求，根据后台传回的数据中一个bool类型的字段值来确定前端的一个label背景颜色。当时有点印象所以去查了一下ng-class，发现有两种方法来解决这种问题。

第一种：

<div ng-class="{true: ‘active‘, false: ‘inactive‘}[isActive]">

这种方式来判断isActice的bool值，如果为true则应用样式active，否则应用样式inactive。

项目中的代码：

h6
    span.label(ng-class="{true:‘label-warning‘,false:‘label-info‘}[dataSet.isPublic]") {{ isPublicTransform(dataSet.isPublic) }}

喔对了这个项目使用的前端模板引擎是jade，使用的样式框架是bootstrap，详细稍后会补充到博客里。

这里判断的代码是

ng-class="{true:‘label-warning‘,false:‘label-info‘}[dataSet.isPublic]

第二种：

<div ng-class {‘selected‘: isSelected, ‘car‘: isCar}"></div> 

如果isSelected为true，则样式追加selected，否则不追加，car同理。

这两种方式，第一种适用于互斥的简单场合，第二种适合复杂样式互相叠加，项目里用的第一种也是因为数据呈现的状态为互斥的，所以使用第一个就可以满足。