Sobre ng no AngularJS-Várias maneiras de implementar a instrução class explicadas

Introdução

Durante o desenvolvimento, é comum encontrar tal necessidade, que um elemento precisa apresentar diferentes aparências em diferentes estados, e a aparência mencionada aqui, claro, é alterar suas propriedades CSS, e para implementar a alteração dinâmica dos valores das propriedades, precisamos alterar dinamicamente seu valor de atributo class.

Vou apresentar três métodos para implementar isso aqui, você pode escolher o método conforme a sua necessidade, vamos ver a seguir.

Primeiro: através do bindevimento bidirecional de dados (não recomendado)

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

Há várias recomendações não recomendadas na internet, sinceramente, se o bindevimento bidirecional de dados do angularJS é tão bom, por que não pode ser alterado dessa forma! Pesquisei as razões: "No controller, envolveu-se o classname, que, na minha opinião, sempre parece um pouco estranho, eu gostaria que o controller fosse um objeto limpo e no sentido de JavaScript", claro, não há texto fixo que diga que não pode ser usado dessa forma, e, na verdade, acho que isso é muito conveniente, permitindo que os elementos HTML mudem da forma que quiser! Da mesma forma, o elemento img no src não pode ser alterado por outros meios, mas pode ser alterado dessa maneira! Claro, essa maneira também dá uma sensação um pouco estranha, pessoalmente acho: é necessário recorrer a ela ~

Segundo método: através de um 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>

A implementação é很简单，é quando className for true, a classe será change1，ao contrário, será change2.

Mas há um ponto negativo: apenas um elemento pode ter dois estados, embora isso seja dito! Basicamente, isso também atende às necessidades. Eu geralmente uso esse método. Simples, intuitivo!

Terceiro método: através da chave/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 for true, a classe será change3，Pessoalmente, acredito que isso é recomendável e pode suprir as pequenas falhas do segundo método~

Resumo

Se pudermos usar essas instruções de forma flexível em nossos projetos, isso nos trará muitas conveniências. Quando enfrentamos problemas, teremos mais ideias. Assim, podemos usar essas instruções em conjunto para resolver rapidamente alguns problemas difíceis! Isso é tudo o que há no artigo. Espero que ajude aqueles que desejam aprender ou trabalhar. Se tiverem dúvidas, podem deixar comentários para trocar ideias.