Quelle est la meilleure façon conditionnelle, appliquer une classe?

Question

Disons que vous avez un tableau qui est rendu dans une ul avec un li pour chaque élément et une propriété sur le contrôleur appelé selectedIndex. Quelle serait la meilleure façon d'ajouter une classe à l' li avec l'indice selectedIndex dans AngularJS?

Je suis actuellement en train de duplication (à la main) li code et ajout de la classe de l'un de la li balises et à l'aide de ng-show et ng-hide seul li par l'index.

Answer 1

Si vous ne voulez pas mettre les noms de classe CSS dans le Contrôleur comme je le fais, ici, c'est un vieux truc que j'utilise depuis de pré-v1 jours. On peut écrire une expression qui renvoie directement à un nom de classe sélectionnée, aucun des directives sont nécessaires:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Veuillez noter que l'ancienne syntaxe du côlon.

Il y a aussi un nouveau meilleur moyen de l'application de catégories, sous certaines conditions, comme:

ng-class="{selected: $index==selectedIndex}"

Angulaire prend désormais en charge les expressions qui renvoie un objet. Chaque propriété (name) de cet objet est aujourd'hui considéré comme un nom de classe et est appliqué en fonction de sa valeur.

Cependant, ces moyens ne sont pas fonctionnellement l'égalité. Voici un exemple:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

On peut donc réutiliser les classes CSS par gros mappage d'un modèle de propriété d'un nom de classe et dans le même temps gardé les classes CSS de Contrôleur de code.

Answer 2

ng-classe prend en charge une expression qui doit correspondre à la

1. une chaîne de caractères de l'espace délimité par les noms de classe, ou
2. un tableau des noms de classe, ou
3. une carte/un objet de la classe des noms à des valeurs booléennes.

Donc, en utilisant le formulaire 3), nous pouvons écrire tout simplement

ng-class="{selected: $index==selectedIndex}"

Voir aussi Comment puis-je conditionnellement appliquer des styles CSS en AngularJS? pour une réponse plus large.

---

Mise à jour: Angulaire 1.1.5 a ajouté le support pour un opérateur ternaire, donc, si cette construction est plus familier pour vous:

ng-class="($index==selectedIndex) ? 'selected' : ''"

Answer 3

Ma méthode préférée est l'aide de l'expression ternaire.

ng-class="condition ? 'trueClass' : 'falseClass'"

Remarque: au Cas où vous utilisez une ancienne version de Anguleuses, vous devriez utiliser ce lieu,

ng-class="condition && 'trueClass' || 'falseClass'"

Answer 4

Je vais ajouter à cela, parce que certaines de ces réponses semblent hors de date. Voici comment je le fais:

<class="ng-class:isSelected">

Où "isSelected' est une variable javascript définie à l'intérieur de l'étendue angulaire de la manette.


Pour mieux répondre à votre question, voici comment vous pouvez générer une liste avec ça:

HTML

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>

JS

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}

Voir: http://jsfiddle.net/tTfWM/

Voir: http://docs.angularjs.org/api/ng.directive:ngClass

Answer 5

Voici une solution beaucoup plus simple:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}

.selected {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>