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

问题描述

问 题

比如：

根据

<ul style="float: left;overflow:hidden;" ng-repeat='node in nodedata' >
            
            <li style="list-style-type:none;">
                
                <span  style="background:green;" 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>

style="background:green;"`可以根据 node.status不同的值1，2，3，4设置red,yellow,green，black如何实现呢？

在线等，没人会吗？

解决方案

html代码：使用ng-style

<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代码：

$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};
};

这篇关于css - AngularJS如何判断不同情况设置不同背景色？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！