在 angularjs 中动态应用 css

Question

我有以下输入。

HTML如下

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

CSS如下

 .negative {
         color: red;
 }

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

但是我希望正数 class 在金额为正数时显示。

谁能告诉我如何同时满足正值和负值。

这里是 css 正数。

.positive {
         color: blue;
}

Answer 1

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

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

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

Answer 2

不用像这样的函数也可以做到

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

一个 codepen 显示

Answer 3

试试这个

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

Answer 4

或者，您可以使用复杂的 ng-class.

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

在 angularjs 中动态应用 css

apply css dynamically in angularjs

javascript

html

css

angularjs

ng-class