About ng in AngularJS-Detailed Explanation of Several Implementation Methods of class Directive

Introduction

In development, we often encounter such needs, that is, an element needs to appear in different states with different appearances, and of course, the so-called appearance is to change its CSS properties, and to dynamically change the attribute values, we need to dynamically change its class attribute value.

Here, I will introduce three methods to achieve this, and you can choose the method according to your own needs. Let's take a look below.

The first method: through two-way data binding of data (not recommended)

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

There are various recommendations online, to be honest, since AngularJS two-way data binding is so cool, why can't it be used to change this way! I checked the reasons: "In the controller, the classname seems to be always so mysterious to me, I hope that the controller is a clean pure JavaScript object", of course, there is no explicit wording that it cannot be used in this way, and I even think it is very convenient, allowing elements in HTML to change as they wish! Similarly, the src attribute of the img element cannot be changed by others, but it can be changed in this way! Of course, this way also gives people a strange feeling, personally I think: it can be done reluctantly~

The second method: through object array

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

The implementation is very simple, that is, when className is true, class is change1, on the contrary, it is change2.

But there is a drawback that only one element can have two states, although I say so! It basically meets the needs, and I usually use this. Simple, intuitive!

The third method: through 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>

When lala is true, the class is change3, personally, I think this is quite recommended and can make up for some of the shortcomings of the second method ~

Summary

If we can flexibly use these instructions in our projects, it will bring us a lot of convenience. When we are solving problems, we will have more ideas, and we can combine these instructions to quickly solve some relatively troublesome problems! That's all for this article. I hope it can bring some help to those who want to learn or work. If you have any questions, you can leave a message for communication.