在angularjs中动态应用css答案

【问题标题】：apply css dynamically in angularjs在angularjs中动态应用css
【发布时间】：2016-11-03 02:20:43
【问题描述】：

我有以下输入。

HTML如下。

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

CSS如下

 .negative {
         color: red;
 }

如果数量为正，则不显示css，如果数量为负，则使用.negative 作为其css，并以红色显示字体。

但是，当金额为正数时，我希望显示正类。

谁能让我知道如何同时满足正值和负值。

这是正面的 css。

.positive {
         color: blue;
}

【问题讨论】：

以后先用google试试。 “ng-class multiple”的最高结果为stackoverflow.com/questions/18871277/…

标签： javascript html css angularjs ng-class

【解决方案1】：

我相信您想根据输入的值在字段上添加类，您可以将 ng-class 与 function 一起使用，这将决定应用哪个类。

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

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

【讨论】：

【解决方案2】：

没有这样的功能也可以做到

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

codepen 显示

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

或者，你可以有一个复杂的 ng-class。

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

【讨论】：