Question

我在两个文本框中输入数值。

<input type="text" id="perse1" ng-init="perse1=0" ng-model="perse1" />
<input type="text" id="perse2" ng-init="perse2=0" ng-model="perse2" />

我有一个标签，我计算总和

Total value is <label>{{(parse1*1) + (parse2*1)}}</label>

现在我想在这个标签上应用不同的css。当总值等于100时，.alert-success其他明智的.alert-warning。

我尝试过以下代码，但没有任何效果。

<label ng-model="total" ng-class="'alert-success': total.text==100,'alert-warning': total.text!=100">{{(parse1*1) + (parse2*1)}}</label>

Answer 1

首先，修复拼写错误（parse1！= perse1等。）

然后你可以在ng-class中重复计算（以避免引入另一个模型）：

<label ng-class="{'alert-success': perse1 + perse2==100,'alert-warning': perse1 + perse2 !=100}">
    {{(perse1*1) + (perse2*1)}}
</label>

我没有将乘法加1，但可以随意添加。

这是一个完整的例子：

.alert-success {
  color: green;
  }

.alert-warning {
  color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="number" id="perse1" ng-init="perse1=0" ng-model="perse1" />
<input type="number" id="perse2" ng-init="perse2=0" ng-model="perse2" />

<label ng-class="{'alert-success': (perse1 + perse2==100),'alert-warning': (perse1 + perse2 !=100)}">
    {{perse1 + perse2}}
</label>

使用AngularJS更改CSS取决于文本框值

1 个答案: