AngularJS sur ng-Détails des différentes méthodes d'implémentation de l'instruction class

Préambule

Dans le développement, on rencontre souvent ce genre de besoins, où un élément doit présenter une apparence différente selon les états, et par cette apparence, j'entends bien sûr la modification des attributs css, et pour réaliser la modification dynamique des valeurs des attributs, il faut changer dynamiquement la valeur de l'attribut class.

Je vais vous présenter trois méthodes pour cela, vous pouvez choisir selon vos besoins, voyons les détails maintenant.

Première méthode : par le biais de la liaison de données bidirectionnelle (non recommandé)

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

Il y a beaucoup de recommandations en ligne, mais honnêtement, pourquoi ne pas utiliser la liaison de données bidirectionnelle d'angularJS qui est si puissante pour le faire ? J'ai cherché les raisons : "Dans le contrôleur, le classname me semble toujours aussi mystérieux, j'espère que le contrôleur soit un objet pur javascript sans impuretés", bien que cela ne soit pas fixé par écrit, je pense que c'est très pratique, permettant aux éléments html de changer comme ils le souhaitent ! De même, pour l'élément img, le src ne peut pas être changé par d'autres moyens, mais avec cette méthode, c'est possible ! Bien sûr, cette méthode donne une impression bizarre, je pense que : on peut le faire malgré tout~

Deuxième méthode : par tableau d'objets

<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 mise en œuvre est simple, c'est-à-dire que lorsque className est true, la classe devient change1，au contraire, il devient change2.

Mais il y a un point négatif, c'est que seul un élément peut avoir deux états, bien que cela soit ainsi! En fait, cela répond généralement aux besoins. Je l'utilise généralement. Simple, intuitif !

Troisième méthode : par clé/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>

Lorsque lala est true, la classe devient change3，je pense que c'est une recommandation, qui peut combler les petits regrets du deuxième type~

Résumé

Si nous pouvons utiliser ces instructions de manière flexible dans nos projets, cela nous apportera beaucoup d'便利. Lorsque nous résolvons des problèmes, nous avons plus d'idées et ainsi nous pouvons combiner ces instructions pour résoudre rapidement certains problèmes difficiles! Voici le contenu complet de cet article, j'espère qu'il apportera un certain aide aux personnes qui veulent apprendre ou travailler. Si vous avez des questions, vous pouvez laisser des commentaires pour échanger.