The eight most common features of AngularJS

Ng-repeat label for the first iteration output

Ng-repeat let table ul ol and other tags and js array 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 | orderBy:'name'">

The second dynamic binding of the Ng-model tag

Any user input, as long as the value of the HTML tag, you can dynamically bind the variables in JS,
And it's dynamic binding.

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

For bound variables, you can use the {{}} Direct reference

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

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

<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.

<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:

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

And of course, ng-dblclick tags.

The ng-switch of the four-branch statement

On, ng-if/ng-show/ng-hide/ng-disabled label
Branching statements allow you to write logical judgments on the interface.

<UL>    ng-repeat=   "person in persons"  >  <span   Ng-switch on=   >  <span   ng-switch-when=  Span class= "St" > "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 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>

The Ng-trim ng-minlength ng-maxlength required Ng-pattern and other tags

The input box in the form, you can use the above label to achieve the validation of user input.
You already know the meaning of them in the literal sense.

<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 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 you get through $scope.usernum is stripped back and left blank 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 the Person.name, and when you select one of them, you can get your selected person.id by yourselected.

Seventh control CSS Ng-style tags

Ng-style helps you control your CSS properties with ease

<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 $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.

$http({    Method: ' POST ',    params: { ID:123},    Data:{name:' John ', Age: -},     URL: "/mypath"    }).Success(function(Response,Status,Headers,Config{        //do Anything what do you want;    }).Error(function(Response,Status,Headers,Config{        //do Anything what do you 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.

AngularJS The eight most common features