css - Comment AngularJS juge-t-il différentes situations et définit-il différentes couleurs d'arrière-plan? ?

Question

Par exemple :

Basé sur

<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;"`Vous pouvez définir le rouge, le jaune, le vert et le noir selon différentes valeurs 1, 2, 3 et 4 de node.status Comment implémenter le noir ?

En attendant en ligne, personne ne sait ?

Answer 1

Code HTML : utilisez le style 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>

code 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

Pour autant que je sache, CSS n'a pas une telle fonction. Le CSS le plus connu est la requête multimédia, qui peut sélectionner différents styles CSS en fonction des différentes tailles d'écran. Je pense qu'une demande comme la question du sujet ne peut être réalisée qu'avec la coopération de JS.

Answer 3

Il y a encore des gens qui utilisent des styles en ligne
Je ferais ça
<style>
.backstyel1{background:red}
.backstyel2{background:jaune>
.backstyel3 { background:vert}
.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>