Question

我有以下输入。

HTML如下。

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

CSS如下

 .negative {
         color: red;
 }

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

然而，我希望积极的课程在数量为正数时出现。

有人能让我知道如何同时满足正面和负面的价值观。

这是积极的CSS。

.positive {
         color: blue;
}

Answer 1

你可以在没有这样的功能的情况下做到这一点

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

codepen显示

Answer 2

我相信您希望根据输入的值在字段上添加课程，您可以使用ng-class和function来决定应用哪个课程。

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

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

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

4 个答案: