Presents the instructions

Instructions to one.

1.ng-app :

This directive defines an angular. js application, similar to the id=”app” in vue, that can perform other data rendering operations within the div tag bound to ng-app

< div ng - app = "" > < p > name: < input type =" text "ng - model =" name "> < / p > < h1 > Hello {{name}} < / h1 > < p ng - bind =" name "> < / p > < / div >Copy the code

Angular data directives

1. Ng-bind ng-model data binding (including two-way binding)

Ng-bind is for the element, and the value of the binding is displayed as tag data,

Ng-model is for form elements,

<div ng-app="">        <input type="text" ng-model="name">        <p ng-bind="name"></p>        <p>{{name}}</p></div>
Copy the code
2. Ng-init initialization (not commonly used)

Ng-init is used to initialize the values of the variables that need to be used

<h3 ng-init="age=19">{{age}}</h3>
<input type="text" ng-model="age">
Copy the code

Data in vUE is defined in data, and Angular defines data on tags with ng-init

3. Ng-repeat is related to ng-for loops

A loop over an element that clones an HTML element for each item in the collection

< ul > < li ng - repeat = "x in [1, 2, 3, 4]" > {{x}} < / li > < / ul > < li * ngFor = "let the item of selectList; let key=index"> {{item}} <button class="del"(click)="toDel(key)">X</button> </li>Copy the code

Let key = index gets the index of the loop, which will be used later.

4. Angular style directives

1. NgClasss dynamically adds CSS classes
<p *ngFor="let item of datas; let key=index" [ngClass]="{red: key%2==0, pink:key%2! ==0}"> {{item}} </p>Copy the code

[ngClass]={class name: Boolean/Boolean expression}

You can also use custom events such as

<p *ngFor="let item of datas; let key=index" [ngClass]=setCss()> {{item}} </p> setCss (){ return "{red: key%2==0, pink:key%2! = = 0}}"Copy the code
2. Inline style [ngStyle]
<p [ngStyle]="{color:red,width:200px}"></p>
<p [ngStyle]="setStyle"></p>

setStyle(){
	return {color:red,width:200px}
}
Copy the code
3. Implement a single CSS class binding using the class directive
<p [class.style01]= true></p>

.style01 {
	color:red;
	width:200px
}
Copy the code