Home > Developer > Web Develop
Ng-repeat Label for iteration output
Ng-repeat let table ul ol and other tags and js array perfect combination
12345 |
<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:
1 |
<li ng-repeat= "Person in Persons | By: ' Name ' > |
Dynamic binding of Ng-model tags
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.
1 |
<input type= "text" ng-model= ' password ' > |
For bound variables, you can use the {{}} Direct reference
1 |
<span>you input password is {{password}}</span> |
If you are familiar with Fiter, you can easily format the output as you want
1 |
<span>{{1288323623006 | date: ' YYYY-MM-DD HH:mm:ss Z '}}</span> |
Ng-click event of a fixed-point-click event
With Ng-click you can easily bind a point-and-click event to a label.
1 |
<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:
12345 |
<ul><li ng-repeat= "Person in Persons" ><button ng-click= "printf (person)"/></li></ul> |
And of course, ng-dblclick tags.
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.
1234567891011121314 |
<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 is a father</span><span ng-show=" person.sex==2 ">you may be a mother</span>& Lt;span>please input your baby ' s name:<input type= "text" ng-disabled= "!person.hasbaby"/></span>< Span></li></ul> |
Check grammar 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.
123 |
<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.
Ng-options tab of drop-down box
Ng-options is a specially crafted label for the drop-down box.
1 |
<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.
Control the Ng-style tag of CSS
Ng-style helps you control your CSS properties with ease
1 |
<span ng-style= "MyColor" >your color</span> |
You can change the effect you want by assigning a value to MyColor, like this:
12 |
$scope. Mycolor={color: ' Blue '}; $scope. Mycolor={cursor: ' pointer ', color: ' Blue '}; |
Filter
<!DOCTYPE HTML><HTMLNg-app><Head><Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8" /><Scriptsrc= "/js/staticsrc/jslib/angular.js"></Script></Head><Body> <Pre>Filter function point: Currency format numbers as currency formats. Filter selects a subset from the array item. The lowercase formatted string is lowercase. Order by to arrange an array based on an expression. Uppercase formatted string is uppercase. </Pre> <HR> <DivNg-controller= "personCtrl003"> <P>Uppercase-name {{person.lastname | uppercase}}</P> <P>Lowercase-name {{person.lastname | lowercase}}</P> </Div> <HR> <DivNg-init= "Quantity=1;price=5">Quantity:<inputtype= "Number"Ng-model= "Quantity">Price:<inputtype= "Number"Ng-model= "Price"> <P>Currency format-Total Price = {{(quantity * prices) | currency}}</P> </Div> <HR> <!--according to age from small to large: - <DivNg-controller= "Msgctrl"> <Ling-repeat= "msg in Msglist | By: ' Age '">{{(Msg.name | uppercase) + ', ' + Msg.age}}</Li> <HR>input Filtering (filter:name):<inputtype= "text"Ng-model= "Name"> <Ling-repeat= "msg in Msglist | filter:name | By: ' Age '">{{(Msg.name | uppercase) + ', ' + Msg.age}}</Li> </Div> <Scripttype= "Text/javascript"> functionpersonCtrl003 ($scope) {$scope. person={firstName:"John", LastName:"Doe", FullName:function() { varx; X=$scope. person; returnX.firstname+ " " +X.lastname; } }; }; functionMsgctrl ($scope) {$scope. msglist= [ {"name":"Zhang 31"," Age": the}, {"name":"Zhang 33"," Age": +}, {"name":"Zhang 32"," Age": -}, {"name":"Zhang 36"," Age": A} ]; } </Script></Body></HTML>
The $http object for the 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.
1234567 |
$http ({method: ' POST ', params: {id:123}, Data:{name: ' John ', age:27}, url: "/mypath"}). Success (function (response, Status, headers, config) {//do anything what 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 Common functions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
