Common functions of AngularJS

Ng-repeat label for the first iteration output
Ng-repeat let table ul ol and other tags and js array perfect combination

Cases:

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

PS: You can specify the order of output
<li ng-repeat= "Person in Persons | By: ' Name ' >

second dynamically bound Ng-model tag
Any user input, as long as it is a valued HTML tag, Can be dynamically bound to the variables in JS,
and dynamic binding.
Example: <input type= "text" ng-model= ' password ';

directly, such as: <span>you input password is {password}}</ Span>
If you are familiar with Fiter, you can write this:
<span>{{1288323623006 | date: ' Yyyy-mm-dd HH:mm:ss Z '}}</span>

The Ng-click event of the third-bound point-click event
With Ng-click you can easily bind a point-and-click event to a label.
Cases:
<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 to the Ng-click method, like this:
Cases:
<ul>
<li ng-repeat= "Person in Persons" >
<button ng-click= "printf (person)"/>
</li>
</ul>
Note: The same is true for Ng-dblclick tags

Ng-switch on, ng-if/ng-show/ng-hide/ng-disabled label of the branch statement
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 is a boy</span>
<span ng-switch-when= "2">you is a girl</span>
</span>
<span ng-if= "person.sex==1">you may be a father</span>
<span ng-show= "person.sex==2">you may be a mother</span>
<span>
Please input your baby ' s name:<input type= "text" ng-disabled= "!person.hasbaby"/>
</span>
<span>
</li>
</ul>

The Ng-trim ng-minlength ng-maxlength required Ng-pattern and other tags
The input box in the form allows you to use the label above to enable validation of user input.

<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 "/>
</form>

You can determine if the input box is empty by $scope. Yourform.inputtext $error. Required.
You can determine whether the input content satisfies ng-pattern,ng-maxlength,maxlength by $scope. Yourform.inputtext. $invalid
The input obtained by $scope. Usernum is removed from the front and back blanks because of the presence of Ng-trim .

The Ng-options label of the drop-down box
ng-options is a specially crafted label for the drop-down box. <select ng-model= "yourselected" ng-options= "person.id as Person.name in persons"></select>
The drop-down box shows Person.name, and when you select one of them, you can get the selected person.idby yourselected .

Seventh control CSS Ng-style tags
Ng-style Controlling CSS Properties
<span ng-style= "MyColor" >your color</span>
You can change the desired effect by assigning a value to the MyColor, like this:
$scope. Mycolor={color: ' Blue '};
$scope. Mycolor={cursor: ' pointer ', color: ' Blue '};

The $http object of the eighth asynchronous request.
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 provides async parameters.

Cases:

$http ({method: ' POST ', params: {id:123}, Data:{name: ' John ', age:27}, url: "/mypath"})
. Success (function (response, status, headers, config) {
Do anything want;
})
. Error (Function (response, status, headers, config) {
Do anything want;
});
If you are a POST request, the data in the params will help you spell the URL and data will be placed in the request body.

You can also do this (GET request):

var url=web_sapi_domain+ ' shopping/mainservlet?req_fmt_type=jsonp&method=getvolumegoods&req_str= ' + ' {' Addressid ":" ' +addressid+ ' "," Substationid ":" ' +substationid+ ' "," VOUCHERSN ":" ' +vouchersn+ ' "," Scope ":" 000000 "} &callback=json_callback ';
$http. Jsonp (URL). Success (function (response) {
Response=angular.fromjson (response);)}

Common functions of AngularJS