Eight features of AngularJS that people can't put down_AngularJS

Eight features of AngularJS that people can’t put down are shared with you for your reference. The details are as follows

First Iterative output ng-repeat tag

ng-repeat perfectly combines table ul ol and other tags with arrays in js

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

You can even specify the order of output:

<li ng-repeat="person in persons | orderBy:'name'">

Second Dynamic binding of ng-model tag

Any html tag with user input and a value can be dynamically bound to variables in js,
And it's dynamic binding.

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

For bound variables, you can use {{}} to directly reference

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

If you are familiar with fiter, you can easily output in the format you need

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

Third Bind click event to ng-click event

Using ng-click you can easily bind click events to a label.

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

Of course, the premise is that you have 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 the ng-dblclick tag

Fourth Branch statement ng-switch on, ng-if/ng-show/ng-hide/ng-disabled tags

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

Fifth Verification syntax ng-trim ng-minlength ng-maxlength required ng-pattern and other tags

For the input box in the form, you can use the tag above to verify user input.
You already know what they mean, literally.

<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 use $scope.yourForm.inputText.$error.required to determine whether the input box is empty
You can use $scope.yourForm.inputText.$invalid to determine whether the input content satisfies ng-pattern, ng-maxlength, maxlength
The input content you get through $scope.userNum has the leading and trailing whitespace removed because of the existence of ng-trim.

Sixth drop-down box ng-options tag

ng-options is a tag specially created for drop-down boxes.

Copy code The code is as follows:

e7766f604bca5d45f18db113cb8368f618bb6ffaf0152bbe49cd8a3620346341

What is displayed in the drop-down box is person.name. When you select one of them, you can get the person.id you selected through yourSelected.

Seventh Control css ng-style tag

ng-style helps you easily control your css attributes

<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'};

Eighth Asynchronous request $http object

AngularJS provides an object similar to jquery's $.ajax for asynchronous requests.
Asynchronous operations are highly respected in AngularJS, so $http operations are all asynchronous, unlike jquery.ajax which also provides 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 making a POST request, the data in params will be put to the end of the URL for you, and the data in data will be put into the request body.

If you can’t put it down after reading it, then apply these to your own projects!