En AngularJS sobre ng-Varias formas de implementar la instrucción class explicadas

Introducción

En el desarrollo, a menudo nos encontramos con necesidades de este tipo, un elemento necesita presentar diferentes aspectos en diferentes estados, y en este aspecto, por supuesto, es cambiar sus propiedades CSS, y para lograr cambiar dinámicamente los valores de las propiedades, necesitamos cambiar dinámicamente su valor de atributo class.

Aquí les presento tres métodos para lograrlo, pueden elegir según sus necesidades, veamos a continuación.

Primero: a través de la binding de datos bidireccionales (no se recomienda)

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

Varios sitios web no lo recomiendan, francamente, si angularJS binding de datos bidireccionales es tan genial, ¿por qué no se puede cambiar de esta manera? He investigado la razón: "En el controlador, el classname parece ser siempre tan misterioso, espero que el controlador sea un objeto puro de JavaScript sin adornos", por supuesto, no hay un texto explícito que diga que no se puede usar de esta manera, y en cambio, creo que es muy conveniente, ¡permite que los elementos HTML cambien de cualquier manera que desees! Del mismo modo, el elemento img no se puede cambiar con otro método, pero es posible hacerlo de esta manera. Claro, esta manera también da una sensación extraña, personalmente creo: es posible que tengamos que hacerlo así~

Segunda opción: a través de un array de objetos}}

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

La implementación es muy sencilla, es decir, cuando className es true, la clase es change1，por el contrario es change2.

Pero hay un punto negativo, solo puede tener dos estados un elemento, aunque así se diga! Básicamente también satisface las necesidades, generalmente uso este. Simple, intuitivo!

Tercera opción: a través de 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>

Cuando lala es true, la clase es change3，personalmente creo que es bastante recomendable, puede compensar las pequeñas deficiencias del segundo método ~

Resumen

Si podemos usar estas instrucciones de manera flexible en nuestros proyectos, nos traerá muchas conveniencias, tendremos más ideas al resolver problemas, y así podemos usar estas instrucciones en combinación para resolver rápidamente algunos problemas difíciles. Esto es todo el contenido de este artículo, espero que pueda ayudar a todos a aprender o trabajar. Si tienen alguna pregunta, pueden dejar un comentario para intercambiar.