10-AngularJS如何判断不同情况设置不同背景色

发表于 | 分类于 |

html代码：使用ng-style

1
2
3
4
5
6
7
8
<ul style="float: left;overflow:hidden;" ng-repeat='node in nodedata'>
    <li style="list-style-type:none;">
        <span ng-style="setColor(node.status)" uib-popover="{{node.nodeIndex|getNodeNameFliter}}"
              popover-trigger="mouseenter" type="button" class="btn btn-default dd breath_light"
              popover-placement="bottom">{{node.nodeIndex|getNodeNameFliter}}</span>
        <i class="icon-chevron-right" style="margin-left:10px;color:green;font-size:20px;"></i>
    </li>
</ul>

js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
$scope.setColor = function (status) {
    var p = "";
    if (1 == status) {
        p = 'red';
    } else if (2 == status) {
        p = 'yellow';
    } else if (3 == status) {
        p = 'green';
    } else if (4 == status) {
        p = 'black';
    }
    return {"background-color": p};
};