Ng-class Changing CSS Styles

And in this so-called appearance of course is to change the properties of its CSS, and the implementation can dynamically change its property value, it is necessary to replace its class attribute

There are three ways to do this:

First: Two-way binding via data (not recommended)

Second: Through an array of objects

The third type: by Key/value

Here are the three kinds of simple:

The first type: two-way binding via data

Implementation method:

12345

function changeClass(){  $scope.className = "change2";}<divclass="{{className}}"></div>

Online various not recommended, to tell the truth, since Angularjs two-way data binding so hanging, why not through this to change it! Checked the original: "In the controller involved in ClassName in my opinion is always so strange, I hope that the controller is a clean and pure javascript meaning of the object", of course, there is no clear text fixed can not be used, And on the contrary, I think this is very convenient, so that the elements in HTML How to change how to change! In the same way, the SRC in the IMG element cannot be changed by anything else, but it is possible!

Of course, this kind of way also does give a person feel strange, personally think: can be forced to do it ~

The second type: Changing the form of a string array

Implementation method:

12345

function changeClass(){  $scope.className = true/false;} <divng-class="{true:‘zhende‘,false:‘jiade‘}[className]"></div>

The implementation is simple, that is, when the classname is true, class is Zhende, and the other is Jiade.

But a little bit of a bad one can only let an element have two states, though so to speak! Basic is to meet the need, I generally use this. Simple and intuitive!

The third kind: through the Key/value way

Implementation method:

12345

function changeClass(){  $scope.lala = true;} <divng-class="{‘selectClass‘:select,‘choiceClass‘:choice,‘haha‘:lala}"></div>

When Lala is true, class is Haha, personally think this is more recommended, can make up the second way of the point of regret ~

ng-class= "{' Choose ': senddata.subspecs[key]===subspec.spec_id}" is followed by true to display the class

So basically, angularjs in the implementation of Ng-class in these three ways ~

Ng-class Changing CSS Styles