在angularjs中動態應用css

HTML如下。

<input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/>

CSS是如下

.negative { 
     color: red; 
}

如果該量爲正時，它會顯示沒有CSS，如果量爲負時，它將使用.negative作爲其CSS和以紅色顯示的字體顏色。

但是，我希望積極的類，當數量爲正數時顯示。

有人可以讓我知道如何同時滿足正面和負面的價值觀。

這裏是積極的CSS。

.positive { 
     color: blue; 
}

來源

2016-06-30 Patrick

對於未來，請先嚐試谷歌。「ng-class multiple」有一個頂級的結果http://stackoverflow.com/questions/18871277/adding-multiple-class-using-ng-class –

或者，你可以有一個複雜的納克級。

<input type="number" class="positive" ng-class="{'negative': amount < 0, 'positive': amount > 0, 'zero': amount == 0}" ng-model="amount"/>

來源

2016-06-30 20:26:23

我相信你想要的基礎上進入，你可以使用ng-class與function這將決定哪些類將得到應用價值的字段添加類。

<input type="number" ng-class="decideClass(amount)" ng-model="amount"/> 

$scope.decideClass = function(value){ 
    return value => 0 ? 'positive': 'negative'; 
}

來源

2016-06-30 20:13:55

你可以不用的功能，像這樣

<input type="number" ng-class="{positive: amount >= 0, negative: amount < 0}" ng-model="amount"/>

一個codepen顯示

來源

2016-06-30 20:22:45 Michael

試試這個

<input type="number" ng-class="{'positive': amount >= 0, 'negative': amount < 0}" ng-model="amount"/>

來源

2016-06-30 20:23:34

在angularjs中動態應用css

回答

相關問題