Qual è il modo migliore per applicare in modo condizionale una class?

Diciamo che hai un array che è reso in un ul con un li per ogni elemento e una proprietà sul controller chiamata selectedIndex . Quale sarebbe il modo migliore per aggiungere una class al li con l’indice selectedIndex in AngularJS?

Attualmente sto duplicando (a mano) il codice li e aggiungendo la class a uno dei tag li e usando ng-show e ng-hide per mostrare solo un li per indice.

Se non vuoi mettere i nomi delle classi CSS in Controller come faccio io, ecco un vecchio trucco che uso fin dai tempi pre-v1. Possiamo scrivere un’espressione che valuta direttamente il nome di una class selezionata , non sono necessarie direttive personalizzate:

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

Si prega di notare la vecchia syntax con due punti.

C’è anche un nuovo modo migliore di applicare le classi in modo condizionale, come:

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

Angular ora supporta espressioni che restituiscono un object. Ogni proprietà (nome) di questo object è ora considerata come un nome di class e viene applicata in base al suo valore.

Tuttavia questi modi non sono funzionalmente uguali. Ecco un esempio:

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

Potremmo quindi riutilizzare le classi CSS esistenti, essenzialmente mappando una proprietà del modello a un nome di class e allo stesso tempo mantenendo le classi CSS fuori dal codice del controller.

ng-class supporta un’espressione che deve valutare entrambi

  1. Una stringa di nomi di classi delimitati da spazio, o
  2. Una serie di nomi di classi, o
  3. Una mappa / object di nomi di classi in valori booleani.

Quindi, usando il modulo 3) possiamo semplicemente scrivere

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

Vedi anche Come faccio a applicare in modo condizionale stili CSS in AngularJS? per una risposta più ampia


Aggiornamento : Angular 1.1.5 ha aggiunto il supporto per un operatore ternario , quindi se quel costrutto ti è più familiare:

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

Il mio metodo preferito è l’uso dell’espressione ternaria.

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

Nota: in caso di utilizzo di una versione precedente di Angular, dovresti utilizzare questo,

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

Aggiungerò a questo, perché alcune di queste risposte sembrano obsolete. Ecco come lo faccio:

  

Dove ‘isSelected’ è una variabile javascript definita all’interno del controller angular.

Per rispondere in modo più specifico alla tua domanda, ecco come potresti generare un elenco con questo:

HTML

 
  • {{item.name}}
  • JS

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

    Vedi: http://jsfiddle.net/tTfWM/

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

    Ecco una soluzione molto più semplice:

     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; } 
      
    • {{value}}

    Selected: {{selectedIndex}}

    Di recente ho affrontato un problema simile e ho deciso di creare un filtro condizionale:

      angular.module('myFilters', []). /** * "if" filter * Simple filter useful for conditionally applying CSS classs and decouple * view from controller */ filter('if', function() { return function(input, value) { if (typeof(input) === 'string') { input = [input, '']; } return value? input[0] : input[1]; }; }); 

    Prende un singolo argomento, che è o un array di 2 elementi o una stringa, che viene trasformato in un array che viene aggiunto ad una stringa vuota come secondo elemento:

     
  • ...
  • Se vuoi andare oltre la valutazione binaria e tenere il tuo CSS fuori dal tuo controller, puoi implementare un semplice filtro che valuta l’input rispetto a un object della mappa:

     angular.module('myApp.filters, []) .filter('switch', function () { return function (input, map) { return map[input] || ''; }; }); 

    Questo ti permette di scrivere il tuo markup in questo modo:

     
    ...

    L’operatore ternario è stato appena aggiunto al parser angular in 1.1.5 .

    Quindi il modo più semplice per farlo è ora:

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

    L’ho fatto di recente che stava facendo questo:

      

    Il valore isShowing è un valore che si trova sul mio controller che viene triggersto con il clic di un pulsante e le parti tra le singole parentesi sono le classi che ho creato nel mio file css.

    EDIT: Vorrei anche aggiungere che codeschool.com ha un corso gratuito sponsorizzato da google su AngularJS che ripercorre tutte queste cose e poi alcune. Non è necessario pagare nulla, basta registrarsi per un account e iniziare! Buona fortuna a tutti voi!

    Possiamo creare una funzione per gestire la class di ritorno con condizioni

    inserisci la descrizione dell'immagine qui

      

    E poi

      

    AngularJS ng-class if example

    • {{icolor}}


    Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"

    • {{icolor}}

    È ansible fare riferimento alla tabella completa dei codici di class ng, ad esempio

    Sono nuovo di Angular ma ho trovato questo per risolvere il mio problema:

      

    Ciò applicherà condizionalmente una class basata su una var. Inizia con un download di icone di default, usando la class ng, controllo lo stato di showDetails se true/false e applico l’ icona di class -upload . Funziona alla grande.

    Spero che sia d’aiuto.

    Funziona correttamente;)

      

    Probabilmente questo verrà downvoted all’oblio, ma ecco come ho usato gli operatori ternari di 1.1.5 per cambiare class a seconda che una riga in una tabella sia la prima, la metà o l’ultima – eccetto se c’è una sola riga nella tabella:

       

    Ecco un’altra opzione che funziona bene quando non è ansible utilizzare ng-class (ad esempio quando si disegna SVG):

     ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}" 

    (Penso che tu debba essere sull’ultimo angular instabile per usare ng-attr-, al momento sono su 1.1.4)

    bene vorrei suggerire di controllare le condizioni nel controller con una funzione che restituisce true o false .

     
    {{day.date}}

    e nel controller controllare la condizione

     $scope.getTodayForHighLight = function(today, date){ return (today == date); } 

    parziale

       

    controllore

      $scope.campaign_range = "all"; $scope.change_range = function(range) { if (range === "all") { $scope.campaign_range = "all" } else { $scope.campaign_range = "thismonth" } }; 

    Questo è nel mio lavoro giudicare condizionatamente più volte:

     
  • {{eOption.eoSequence}}     |     2020 元
  • Se si utilizza l’angular pre v1.1.5 (ovvero nessun operatore ternario) e si desidera comunque un modo equivalente per impostare un valore in entrambe le condizioni, è ansible fare qualcosa del genere:

     ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}" 

    Se hai una class comune che viene applicata a molti elementi, puoi creare una direttiva personalizzata che aggiungerà quella class come ng-show / ng-hide.

    Questa direttiva aggiungerà la class ‘triggers’ al pulsante se viene cliccata

     module.directive('ngActive', ['$animate', function($animate) { return function(scope, element, attr) { scope.$watch(attr.ngActive, function ngActiveWatchAction(value){ $animate[value ? 'addClass' : 'removeClass'](element, 'active'); }); }; }]); 

    Ulteriori informazioni

    Aggiungo solo qualcosa che ha funzionato per me oggi, dopo molte ricerche …

     

    Spero che questo aiuti nel tuo sviluppo di successo.

    =)

    Sintassi di espressioni non documentate: Link al sito web grande … =)

    Controlla http://www.codinginsight.com/angularjs-if-else-statement/

    Il famigerato angularjs se altro affermazione !!! Quando ho iniziato ad usare Angularjs, ero un po ‘sorpreso di non riuscire a trovare un’istruzione if / else.

    Quindi stavo lavorando a un progetto e ho notato che quando si utilizzava l’istruzione if / else, la condizione veniva visualizzata durante il caricamento. Puoi usare ng-cloak per risolvere questo problema.

     

    Show this line

    Show this line instead

    .ng-cloak { display: none }

    Grazie amadou

    Puoi usare questo pacchetto npm. Gestisce tutto e ha opzioni per classi statiche e condizionali basate su una variabile o una funzione.

     // Support for string arguments getClassNames('class1', 'class2'); // support for Object getClassNames({class1: true, class2 : false}); // support for all type of data getClassNames('class1', 'class2', ['class3', 'class4'], { class5 : function() { return false; }, class6 : function() { return true; } });