css - Bagaimanakah AngularJS menilai situasi yang berbeza dan menetapkan warna latar belakang yang berbeza? ?

Question

Contohnya:

Berdasarkan

<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;"`Anda boleh menetapkan merah, kuning, hijau dan hitam mengikut nilai berbeza 1, 2, 3 dan 4 node.status Bagaimana untuk melaksanakan hitam?

Menunggu dalam talian, tiada siapa yang tahu?

Answer 1

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

Answer 2

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.

Answer 3

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>