如何使用ng-class实现正负样式angularJs？

Question

我正在开发一个应用程序，我需要在计算中使用红色表示负数，蓝色表示正数。

<td class="amount debit">
    <input type="text" class="form-control" ng-model="vm.model.form.amount_debit">
</td>
<td class="amount credit">
    <input type="text" class="form-control" ng-model="vm.model.form.amount_credit">
</td>
<td class="amount balance" ng-class="{
    negative : (book.total_balance + +vm.model.form.amount_debit - +vm.model.form.amount_credit) < 0.00, 
    positive : (book.total_balance + vm.model.form.amount_debit - +vm.model.form.amount_credit) >= 0.00
}">
    @{{vm.model.book.total_balance + +vm.model.form.amount_debit - +vm.model.form.amount_credit| currency:""}}
</td>

在金额余额中，一旦用户在任一输入字段中输入，就会计算金额。问题是什么时候：

如果我输入金额借记输入类型，它会显示正值。如果我输入金额信用输入类型，它会显示负值。

因此它不能准确代表我想要的输出。

假设：余额 = 1,000 amount_debit = 300

它会告诉我总计 = 1,300 正数是正确的

那么什么时候

余额 = 1,000 amount_credit = 300

它会告诉我 total = 700 在 NEGATIVE 中是不正确的。应该还是正的。

我的逻辑部分是不是遇到了什么错误？或者我可以在哪里修复？谢谢

Answer 1

我在这里创建了一个例子http://jsfiddle.net/ADukg/12791/

<table>

<td class="amount balance">
    <input type="number" class="form-control" placeholder="balance" ng-model="total_balance" />
</td>
<td class="amount debit">
    <input type="number" class="form-control" placeholder="debit"  ng-model="amount_debit" />
</td>
<td class="amount credit">
    <input type="number" class="form-control" placeholder="credit"  ng-model="amount_credit">
</td>
<td class="amount balance" ng-class="{
    negative : (total_balance - amount_debit + amount_credit) < 0.00, 
    positive : (total_balance - amount_debit + amount_credit) >= 0.00
}">
    @{{total_balance - amount_debit + amount_credit | currency:""}}
</td>

</table>

我使用了 `input type="number" 所以我不必担心将字符串解析为 float/int。

如何使用ng-class实现正负样式angularJs？

How to use ng-class to achieve positive and negative styling angularJs?

javascript

angularjs

ng-class