Ng-class Summary of "ANGULARJS" "Learning experience"

Original: http://www.imooc.com/wenda/detail/236998

Today, a little angularjs seems simple, but there are a lot of problems in practice, ng-class.

------------------------------------------------------------------------

But first, and angular unrelated to a JS small pit, do not know that we have encountered no, is the JSON format of the file. have been in the JS in the definition of the JSON array, or from the PHP background with Json_encode encoding directly back, never written in the JSON format of data, today encountered a bit of trouble.

It would be nice to define a JSON array in JS:

vararr = [{a:1,b:2},{a:5,b:10}];

But you can't write this in a JSON file.

[{a:1,b:2},{a:5,b:10}]

You must enclose the key in quotation marks. Debugging for a long time today to find this problem, but also a lesson it ...

------------------------------------------------------------------------

Then say Ng-class this thing, the teacher said when a sentence, use time still need to spend some time.

I've summed up a bit. There are 4 ways to dynamically add a class to an element by Ng-class, one of the following.

Let's take a look at the official instructions.

I don't know if you can see it, give me a link https://code.angularjs.org/1.3.0-beta.11/docs/api/ng/directive/ngClass

Roughly translated is said that the ng-class instruction has 3 operations, the type of value calculated by Ng-class equals expression determines which

Mode 1: When its value is a string, it adds a string separated by a space to the class

Mode 2: When the value is an array, each string element is added to the class

Mode 3: When the value is an object (Key=>value), add the key of true to the class

The first is the least recommended.

<divng-class="{{myclass}}"></div>    ....    <script>        function someController($scope){            $scope.myclass = "xxx";        }    </script>

The above method is not a problem in effect, but there is no need to use Ng-class, ordinary can also achieve this effect. and control the style in controller always feel a bit awkward ...

And then say another way to use

<divng-class="{true :‘red‘, false :‘green‘}[someVariable]"></div>

When this usage means that variable is true, add red to the element, and if variable is false, add the class green, which is a good use when the logic is relatively simple.

The next appropriate time to add multiple classes, that is, the value of Ng-class is an object

<png-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>    <inputtype="checkbox"ng-model="deleted"> deleted (apply "strike" class)    <br>    <inputtype="checkbox"ng-model="important"> important (apply "bold" class)    <br>    <inputtype="checkbox"ng-model="error"> error (apply "red" class)

The above code Ng-class is an object, we have two-way data binding deleted,important,error, when we check the checkbox, they become true, and then the corresponding key is added to the class,

There is also an array type, where each string element is added to the class

<png-class="[style1, style2, style3]">Using Array Syntax</p>    <inputng-model="style1"placeholder="Type: bold, strike or red">    <br>    <inputng-model="style2"placeholder="Type: bold, strike or red">    <br>    <inputng-model="style3"placeholder="Type: bold, strike or red">

When we define the bold,strike,red in the style, the style of the class, we enter these strings will appear effect

I recommend that you use objects to add objects, and that the best control logic is clear.

------------------------------------------------------------------------------

Share these today and hope to help you a little.

Ng-class Summary of "ANGULARJS" "Learning experience"