有一個小的需求,根據後臺傳回的數據中一個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同理。
這兩種方式,第一種適用於互斥的簡單場合,第二種適合複雜樣式互相疊加,項目裏用的第一種也是因爲數據呈現的狀態爲互斥的,所以使用第一個就可以滿足。