Angular ng-Class Detailed Explanation and Example Code

　In some of our previous AngularJS development experience summaries, we said that in Angular development, Angular controller never contains DOM elements (HTML/CSS), in the controller needs a simple POJO (Plain Object JavaScript Object), which is completely isolated from the view (the responsibility of interacting with the AngularJS framework). But in some projects, the most involving DOM elements in the controller is to define a variable in the controller scope, whose value is the class name, like:

function ctr($scope){
  $scope.test = "classname";
}
<div class="{{test}}"></div>

　　　　 This method is completely correct, it is a way to change class provided by Angular, but in the controller involving the classname seems to be always so mysterious to me, I hope that the controller is a clean pure JavaScript object.

Angular provides for us3kind of solution to handle class:

1: scope variable binding, as in the example above. (Not recommended for use)
2: string array form.
3: object key/value handling.

We continue with the other two solutions:

1String array form is for simple class changes, with exclusive changes, true is what class, false is what class, its form is like;

function Ctr($scope) { 
  $scope.isActive = true;
}
<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>

The result is2Combination, if the isActive expression is true, then active, responsible for inactive.

2Object key/value handling is mainly for complex class mixing, its form is like:

function Ctr($scope) { 
}
<div ng-class {'selected': isSelected, 'car': isCar}>
</div> 

When isSelected = true, add selected class,

When isCar=true, add car class,

So your result may be4combination.

I personally recommend using2,3Two methods, it is not recommended to put class in the controller scope above, scope needs to maintain purity, only data and behavior can be on the scope.

That's all for Angular ng-Detailed explanation of class, will continue to supplement relevant materials, thank you all for your support to this site!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report violations by email to codebox.com (replace # with @ when sending an email) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.