How to keep CSS class free from the influence of Angular controller

This article mainly explains "how to keep the CSS class free from the influence of the Angular controller". The explanation in the article is simple and clear and easy to learn and understand. please follow the editor's train of thought to study and learn "how to keep the CSS class free from the influence of the Angular controller".

You may not be familiar with ng-class, which is a special instruction that allows binding expressions and places them as classes of elements. A very common use of ng-class is as follows:

Classapplied!

FunctionMySimpleCtrl () {

$scope.active='active'

...

So in the controller we set the specific class that should be displayed; so suppose we have a class "inactive."-- we simply set the $scope.active variable to "inactive", and finally we set the class in the view.

But ng-class works even better than that:

Ng-class accepts three different types of values:

1. String value (name of the class)

2. String array (class to be applied)

3. Object to be evaluated + expression

The syntax of option 3 looks like this

Ng-class= "{objectofkey/valuepairs} [expressiontoevaluate]"

Basically, ng-class evaluates the expression (in square brackets) and then uses it as the object's key; the key-related value is the applied class.

This allows us to convert the $scope.Action value to a real Boolean value (which is how we use it)-there is no view logic in the controller, and the controller is easier to test and can be reused.

This is a simple example:

Classapplied

!

FunctionMySimpleCtrl () {

$scope.isActive=true

If you are using some kind of conditional expression (that is, switching), you can use another very similar syntax:

Ng-class= "{'selected':isSelected,'blue':isBlue}"

Here, if selected is true, the selected class is applied, as is the blue class. Angular makes the application as realistic as possible, so you can set the class to selected and blue.

Thank you for reading, the above is the content of "how to keep the CSS class from the influence of the Angular controller". After the study of this article, I believe you have a deeper understanding of how to keep the CSS class free from the influence of the Angular controller, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!