Angular---common instruction summary

Boolean attribute directives:

ng-disabled can bind the disabled property to the following form input fields:

input , Textarea,select,button

<button ng-model= "button" ng-disabled= "!someproperty" >Abutton</button>

button is disabled when !someproperty=true

ng-readonly,ng-selected the usage is as above.

Class Boolean Property directives:

Ng-href , dynamically created URL when, with Ng-href Replace href

<ang-href= "{{myhref}}" >i ' m feeling lucky</a>

NG-SRC tells the browser not to load the image until the ng-src corresponding expression takes effect

Working with Scopes

Ng-app , The DOM element of the Ng-app property is marked as the starting point of the $rootscope

Ng-controller , Create a sub-scope for the directives nested within it

Ng-include , load, compile, and include external HTML fragments into the current application

Ng-switch , This instruction is used in conjunction with Ng-switch-when and on= "PropertyName" and can be changed in PropertyName

Render different instructions into the view

<div>

<inputtype= "text" ng-model= "Person.name"/>

<div ng-switchon= "Person.name" >

<png-switch-default>and the winner is</p>

</div>

Ng-view , directives are used to set the location of the view that will be managed and placed in HTML by the route.

Ng-if, Use the NG-IF directive to generate or remove an element in the DOM entirely based on the value of an expression

The most essential difference between ng-if and no-show and ng-hide directives is that it does not show or hide DOM nodes through CSS, and

is to actually build or remove the node.

ng-repeat , used to traverse

$index: The progress of the traversal (0...length-1).

Q $first : When an element is traversed the first value is true .

Q $middle : When an element is between the first and last elements, the value is true .

Q $last : When the element is traversed the last value is true .

Q $even : When $index value is an even-numbered true .

Q $odd : When $index value is an odd number of true

A collection or generate a template instance for each element in the collection

<ulng-controller= "Peoplecontroller" >

<ling-repeat= "person in people" ng-class= "{even:! $even, odd:! $odd}" >

{{person.name}}lives in {person.city}}

</li>

</ul>

. Odd {

Background-color:blue;

}

. even {

background-color:red;

}

Angular.module (' myApp ', [])

. Controller (' Peoplecontroller ', function ($scope) {

$scope. People = [

{Name: "Ari", City: "San Francisco"},

{Name: "Erik", City: "Seattle"}

];

});

Ng-init , The ng-init directive is used to set the initial state of the internal scope when the instruction is called

{{}},the{{}} syntax is a ANGULARJS built-in template syntax that creates bindings between internal $scope and views

Ng-bind , Role and {{}} , except that the splash screen does not appear

Ng-cloak ,

In addition to using ng-bind to avoid flicker of non-rendered elements, you can also use the NG-CLOAK directive on elements containing {{}}:

<bodyng-init= "greeting= ' HelloWorld '" >

<p ng-cloak>{{greeting}}</p>

</body>

ng-bind-template ,

Similar to the Ng-bind Directive, ng-bind-template is used to bind multiple expressions in a view.

<div ng-bind-template= "

Ng-model , directives are used to include input, select, text area, or custom form controls in the scope in which they are contained

To bind the property. It can provide and handle form validation functions

{{Message}} {{name}} ' ></div>

Event directives

Ng-change ,

This instruction calculates the value of the given expression when the form input changes. Because to process the form input, this command should be

and Ngmodel to use it together.

<divng-controller= "Equationcontroller" >

<inputtype= "Text"

Ng-model= "Equation.x"

Ng-change= "Change ()"/>

<code>{{equation.output}}</code>

</div>

Angular.module (' myApp ', [])

. Controller (' Equationcontroller ', function ($scope) {

$scope. Equation ={};

$scope. Change =function () {

$scope. Equation.output=parseint ($scope. equation.x) + 2;

};

});

Ng-form , used to nest another form inside a form. Normal HTML <form> tags do not allow nesting, but ng-form can.

Ng-click , used to specify the method or expression to invoke when an element is clicked.

Ng-select , used to bind data to the <select> elements of HTML. This instruction can be used in conjunction with Ng-model and ng-options instructions to build a fine and well-behaved dynamic form

Ng-submit ,

Ng-submit is used to bind an expression to an onsubmit event. This command also blocks the default behavior (sending the request and reloading the page) unless the form contains an Action property

Ng-class, use Ng-class to dynamically set the class of an element by binding an expression that represents all the classes that need to be added

<divng-controller= "Lotterycontroller" >

<divng-class= "{red:x > 5}"

ng-if= "x >5" >

You won!

</div>

<buttonng-click= "x = Generatenumber ()"

ng-init= "x =0" >

Draw number

</button>

<p>number is:{{x}}</p>

</div>

. Red {

background-color:red;

}

Angular.module (' myApp ', [])

. Controller (' Lotterycontroller ', function ($scope) {

$scope. generatenumber= function () {

Returnmath.floor ((Math.random () *10) +1);

};

});

when the random number is greater than 5 , the new class is added

Angular---common instruction summary