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

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>