kod html: gunakan gaya ng

<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>

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

Setahu saya, CSS tidak mempunyai fungsi sedemikian CSS yang paling terkenal ialah pertanyaan media, yang boleh memilih gaya CSS yang berbeza mengikut saiz skrin yang berbeza. Saya rasa permintaan seperti soalan subjek hanya boleh direalisasikan dengan kerjasama JS.

Masih ada orang menggunakan gaya sebaris
Saya akan lakukan ini
<style>
.backstyel1{background:red}
.backstyel2{background:kuning}
.backstyel3 { latar belakang:hijau}
.backstyle4{latar belakang:hitam}
</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>