你能用 AngularJS 做条件格式化吗？

Posted 2023-03-06

【中文标题】你能用 AngularJS 做条件格式化吗？

【英文标题】：Can you do conditional formatting with AngularJS?

【发布时间】：2014-06-03 07:56:58

【问题描述】：

我有一个包含来自我的控制器的值的元素：

<span>[[myvalue]]</span>

我会根据值更改背景颜色。例如，值 1-5 应为红色，6-10 应为绿色。

<span style='background-color: #green'>9</span>
<span style='background-color: #red'>1</span>

实现这一目标的最简单方法是什么？

【参考方案1】：

这里是一个使用ngStyle的例子

<span  ng-style="myStyle(myValue)"> myValue </span>

控制器：

$scope.myStyle= function(value)
    return parseInt(value) > 5 ? color: 'green' : color: 'red'

【参考方案2】：

ngStyle 提到的 tymeJV 也可以使用 ngClass

<span ng-class="'myClass' : (myValue < 9)">myValue</span>

另外，为了促进一些单元测试，我还建议将逻辑放入函数中，这样您就可以轻松测试，因为它也使标记更易于阅读。

标记

<span ng-class="'myClass' : isSpecial(myValue)">myValue</span>

控制器

$scope.isSpecial = function(value) return myValue < 9;

我的例子和你的例子有点做作，但可以帮助以后更容易维护。