Spiegazione dettagliata di diversi modi di implementazione dell'instruzione ng-class in AngularJS

Prefazione

Nella sviluppo, si incontra spesso la necessità che un elemento debba apparire in diverse condizioni, e in questo senso, il "suo aspetto" si riferisce naturalmente a cambiare le proprietà CSS, e per realizzare la modifica dinamica dei valori delle proprietà, dobbiamo realizzare la sostituzione dinamica del valore dell'attributo class.

Vi presento tre metodi per realizzare questo, potete scegliere il metodo in base alle vostre esigenze, vediamo come fare.

Prima: attraverso il binding dei dati bidirezionale (non raccomandato)

<div ng-controller="firstController">
  <div ng-class="{{className}}"></div>
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className='change';
   }
</script>

Ci sono molte raccomandazioni online che non lo suggeriscono, onestamente, se l'indicatore di binding dei dati bidirezionale di angularJS è così fantastico, perché non si può cambiare attraverso questo! Ho cercato le ragioni: "Nel controller è coinvolto il classname che a mio avviso sembra sempre così misterioso, desideravo che il controller fosse un oggetto puramente JavaScript", naturalmente non c'è una prescrizione esplicita che non possa essere utilizzato in questo modo, anzi, penso che sia molto comodo, permettendo agli elementi HTML di cambiare come vogliono! Allo stesso modo, l'elemento img con src non può essere cambiato da altri, ma con questo metodo è possibile! Certo, questo metodo può sembrare un po' strano, a mio avviso: è possibile farlo per necessità!

Secondo metodo: tramite array di oggetti

<div ng-controller="firstController">
 <div ng-class="{true:'change1',false:'change2'}[className]"></div>
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className=true;
   }
</script>

La realizzazione è semplice: quando className è true, la classe è change1, altrimenti è change2.

Ma c'è un aspetto negativo: può avere solo due stati per un singolo elemento, anche se così si dice! È comunque soddisfacentemente soddisfacente. Lo uso spesso. Semplice, intuitivo!

Terzo metodo: tramite key/value

<div ng-controller="firstController">
  <div ng-class="{'change1':select,'change2':choice,'change3':lala}">
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.select=true;
     $scope.lala=true;
   }
</script>

Quando lala è true, la classe è change3, penso che sia una buona scelta che può compensare i difetti del secondo metodo.

Sommario

Se possiamo utilizzare queste istruzioni in modo flessibile nei nostri progetti, ci porterà molto comodo. Quando risolviamo problemi, avremo più idee. In questo modo possiamo utilizzare queste istruzioni in combinazione per risolvere rapidamente alcuni problemi piuttosto fastidiosi! Questo è tutto il contenuto dell'articolo. Spero che possa aiutare chiunque voglia imparare o lavorare. Chiunque abbia domande può lasciare un commento per discutere.