Angularjs the eight kinds of function that people fondle admiringly _angularjs

Eight kind of angularjs lets the person fondle admiringly the function to share to everybody, for everybody reference, the concrete content is as follows

First ng-repeat Label for iteration output

Ng-repeat let table ul ol and other tags and js in the array of perfect combination

<ul>
<li ng-repeat= ' person in persons ' >
{{person.name}} ' is {{person.age}} ' years old.
</li>
</ul>

You can even specify the order of the output:

<li ng-repeat= "Person in Persons | By: ' Name ' >

Second Dynamically bound Ng-model tags

Any user input, as long as the value of the HTML tag, can dynamically bind the variables in JS,
and is dynamic binding.

<input type= "text" ng-model= ' password ' >

For a bound variable, you can use {{}} to refer directly to the

<span>you input password is {{password}}</span>

If you are familiar with Fiter, you can easily output in the format you want

<span>{{1288323623006 | date: ' YYYY-MM-DD HH:mm:ss Z '}}</span>

Third Ng-click Event of the binding point hit event

Using Ng-click you can easily bind a label to a point hit event.

<button ng-click= "pressme ()"/>

Of course, the premise is that you want to define your own Pressme method in the $scope domain.

Unlike the traditional OnClick method, you can even pass an object for the Ng-click method, like this:

<ul>
<li ng-repeat= "person in Persons" >
<button ng-click= "printf (person)"/>
</li >
</ul>

And, of course, the Ng-dblclick tag.

Fourth ng-switch on, ng-if/ng-show/ng-hide/ng-disabled tags of branch statements

Branching statements allow you to write logical judgments on the interface.

<ul>
<li ng-repeat= "person in Persons" >
<span ng-switch on= "Person.sex" >
<span ng-switch-when= "1" >you are a boy</span>
<span ng-switch-when= "2" >you are a girl</span>
</span>
<span ng-if= "Person.sex==1" >you may be a father</span> <span
" Person.sex==2 ">you May is a mother</span>
<span> please
input your baby ' s name:<input type=" Text "ng-disabled="!person.hasbaby "/>
</span>
<span>
</li>
</ul>

Fifth checksum Syntax Ng-trim ng-minlength ng-maxlength required Ng-pattern, etc. tags

The input box in the form, you can use the above label to achieve the user input validation.
You already know what they mean by literal meaning.

<form name= "Yourform" >
<input type= "text" name= "Inputtext" required ng-trim= "true" ng-model= "Usernum" Ng-pattern= "/^[0-9]*[1-9][0-9]*$/" ng-maxlength= "6" maxlength= "6"/>
</form>

You can determine whether the input box is empty by $scope. Yourform.inputtext $error required.
You can use $scope. Yourform.inputtext $invalid to determine whether the input content satisfies ng-pattern,ng-maxlength,maxlength
The input you get through $scope.usernum is removed from the blanks because of the presence of Ng-trim.

Sixth ng-options label of dropdown box

Ng-options is a specially crafted label for the dropdown box.

Copy Code code as follows:

<select ng-model= "yourselected" ng-options= "person.id as Person.name in persons" ></select>

The dropdown box shows Person.name, and when you select one of them, you can get the person.id you selected by yourselected.

Seventh Control CSS Ng-style tags

Ng-style to help you easily control your CSS properties

<span ng-style= "MyColor" >your color</span>

You can change the effect you want by assigning a value to MyColor, like this:

$scope. Mycolor={color: ' Blue '};
$scope. Mycolor={cursor: ' pointer ', color: ' Blue '};

the eighth asynchronous request $http object

ANGULARJS provides a jquery-like $.ajax object for asynchronous requests.
Asynchronous operations are highly prized in angularjs, so $http operations are asynchronous, unlike Jquery.ajax, which also provide async parameters.

$http ({method: ' POST ', params: {id:123}, Data:{name: ' John ', age:27}, url: '/mypath '})
. Success (Function (response , status, headers, config) {
//do anything what you want;
})
. Error (Function (response, status, headers, config) {
//do anything what you want;
});

If you are a POST request, the data in the params will be added to the URL and the data will be placed in the request body.

After reading is not already put down, then good to apply these to their own projects!