你能用AngularJS进行条件格式化吗？

Question

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

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

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

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

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

Answer 1

正如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};

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

Answer 2

以下是使用ngStyle

的示例

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

控制器：

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