Angularjs's Ng-class (11)

Objective

In this section we will talk about the ng-class in the instruction, by adding ng-class to generate the corresponding style, sometimes we have to choose the corresponding style according to different conditions, this section we look at the flexibility of ng-class usage.

Ng-class using Strings (i)

Presumably this usage is the simplest one, let's take a little demo.

<Divclass= "Well">    <Divclass= "Form-group">        <inputtype= "text"placeholder= "Input your class type"Ng-model= "Texttype"class= "Form-control" />    </Div>    <DivNg-class= "Texttype"style= "Font-size:x-large;">xpy0928 from Cnblogs</Div></Div>

Effect:

Ng-class using Arrays (ii)

Ng-class as an array to select the style is implemented by [], as follows:

<Divclass= "Well">    <inputtype= "text"Ng-model= "Styleone"class= "Form-control">    <inputtype= "text"Ng-model= "Styletwo"class= "Form-control">    <DivNg-class= "[Styleone, Styletwo]"style= "Font-size:x-large;">xpy0928 from Cnblogs</Div></Div>

Effect:

Ng-class using an evaluation expression (iii)

What evaluates an expression is to display the corresponding style when the variable we define is true, otherwise it is not applied. Let's take a look at the code:

<Divclass= "Well">    <inputtype= "checkbox"Ng-model= "Danger">good luck to u? <inputtype= "checkbox"Ng-model= "wrong">u are wrong? <BR/>    <spanNg-class= "{' Btn-danger ': danger, ' btn-success ': Wrong}"style= "Font-size:x-large;">xpy0928 from Cnblogs</span></Div>

The evaluation expression must be represented by the {}, which is relatively advanced in several ways, compared to the Ng-class usage. Let's look at the actual effect:

Let's also cite an example of coloring different lines in the display list.

<Divclass= "Well">    <ul>        <LiNg-class= "{' Text-info ': $even, ' Text-danger ': $odd}"ng-repeat= "Item in Items">{{Item.name}}</Li>    </ul></Div>

Effect:

Ng-class using three-dimensional expressions (iv)

Ternary operators do not have to introduce the bar, we directly on the code to demonstrate the effect:

<Divclass= "Well">    <ul>        <LiNg-class= "$even? ' Btn-info ': ' Btn-danger ' "ng-repeat= "Item in Items">{{Item.name}}</Li>    </ul></Div>

Effect:

Summarize

In this section we talk about the Ng-class directive, by giving several different ways of using it to illustrate its flexibility, to tell us to choose the right scenario for you in different situations.

Angularjs's Ng-class (11)