html code: using 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 code:

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

As far as I know, CSS does not have such a function. The most famous CSS is media query, which can select different CSS styles according to different screen sizes. I think a request like the one in question can only be realized with the cooperation of JS.

Now there are actually some people who use inline styles
That’s what I would do
<style>
.backstyel1{background:red}
.backstyel2{background:yellow}
.backstyel3{background:green}
.backstyel4{background:black }
</style>

 <span class="btn btn-default dd breath_light backstyel{{node.nodeIndex|getNodeNameFliter}}" 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>