Angualrjs Learning Summary Three (HTTP, select, tables, directives, and events)

Last Update:2016-05-13 Source: Internet

Author: User

Tags button type

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

One: http

XMLHttpRequest: $http is a core service of ANGULARJS for reading data from remote servers.
$http. Get (URL) is a function for reading server data.
Example:
<div ng-app= "myApp" ng-controller= "Customersctrl" >
<ul>
<li ng-repeat= "x in Names" >
{{x.name + ', ' + X.country}}
</li>
</ul>
</div>
<script>
var app = Angular.module (' myApp ', []);
App.controller (' Customersctrl ', function ($scope, $http) {
$http. Get ("http://localhost:8080/web/test.jsp")
. Success (Function (response) {$scope. names = Response.records;});
});
</script>

JSON format string:
{
"Records":
[
{
"Name": "Alfreds futterkiste",
"City": "Berlin",
"Country": "Germany"
},
{
"Name": "Berglunds snabbköp",
"City": "Across",
"Country": "Sweden"
}
]
}

Two: PHP Ajax cross-domain problem best solution

Cross-domains are implemented by setting Access-control-allow-origin.
For example: The domain name of the client is client.runoob.com, and the requested domain name is server.runoob.com.
If you use AJAX access directly, you will get the following error:
XMLHttpRequest cannot load http://server.runoob.com/server.php.
No ' Access-control-allow-origin ' header is present on the requested resource. Origin ' http://client.runoob.com ' is therefore not allowed access.

1. Allow single domain access
To specify a domain name (http://client.runoob.com) for cross-domain access, simply add the following code to the http://server.runoob.com/server.php file header:
Header (' access-control-allow-origin:http://client.runoob.com ');

2. Allow multiple domain names to be accessed
To specify multiple domain names (http://client1.runoob.com, http://client2.runoob.com, and so on) for cross-domain access, simply add the following code to the http://server.runoob.com/server.php file header:
$origin = isset ($_server[' Http_origin ')? $_server[' http_origin ': ';

$allow _origin = Array (
' Http://client1.runoob.com ',
' Http://client2.runoob.com '
);

if (In_array ($origin, $allow _origin)) {
Header (' Access-control-allow-origin: '. $origin);
}

3. Allow all domain names to access
To allow all domain access, simply add the following code to the http://server.runoob.com/server.php file header:
Header (' access-control-allow-origin:* ');

Three: Create a selection box using Ng-options

<! DOCTYPE html>
<meta charset= "Utf-8" >
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body ng-app= "myApp" ng-controller= "Myctrl" >
<div>
<select ng-model= "Name" ng-options= "x for x in Names" >{{x}}</select>
</div>
<script>
Angular.module (' myApp ', []). Controller (' Myctrl ', function ($scope) {
$scope. Name = ' Google ';
$scope. Names = [' Google ', ' Baidu ', ' 360 '];
});
</script>
</body>

Four: Angularjs Show data in table

<div ng-app= "myApp" ng-controller= "Customersctrl" >
<table>
<TR ng-repeat= "x in Names" >
<td>{{X.name}}</td>
<td>{{X.country}}</td>
</tr>
</table>
</div>
<script>
var app = Angular.module (' myApp ', []);
App.controller (' Customersctrl ', function ($scope, $http) {
$http. Get ("http://localhost:8080/web/test.jsp")
. Success (Function (response) {$scope. names = Response.records;});
});
</script>

Five: Display serial number ($INDEX) ng-disabled ng-show ng-hide directive

1: Add serial number
<table>
<TR ng-repeat= "x in Names" >
<td>{{$index + 1}}</td>
<td>{{X.name}}</td>
<td>{{X.country}}</td>
</tr>
</table>

2:ng-disabled Disabling directives
When Ng-disabled is true, the control is disabled;
When false, the control is available.
Example:
<div ng-app= "MYAPP" >
<p>
<button ng-disabled= "Switch" > click </button>
</p>
<p>
<input type= "checkbox" ng-model= "switch"/>
</p>
<p>
{{Switch}}
</p>
</div>

3:ng-show, show or hide an HTML element
Ng-show= "true" when the element is displayed, False when the element is hidden.
<div ng-app= "myApp" ng-init= "Switch=true" >
Example:
<p>
<button type= "button" ng-show= "switch" > click </button>
</p>
<p>
<input type= "checkbox" ng-model= "switch"/>
</p>
<p>
{{Switch}}
</p>
</div>

4:ng-hide, show or hide an HTML element
When the value of Ng-hide is true, the element is hidden when the value of Ng-hide is false.
The value of the ng-hide can be either a direct amount or an expression.
Example:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ></script>
<body>
<div ng-app= "myApp" ng-controller= "Myctrl" >
<button ng-click= "Toggle ()" > Click </button>
<div ng-hide= "MyVar" >
<p> Name: <input type= "text" ng-model= "FirstName"/></p>
<p> Surname: <input type= "text" ng-model= "LastName"/></p>
</div>
<div>{{firstname+ "" +lastname}}</div>
</div>
<script>
var app = Angular.module (' myApp ', []);
App.controller (' Myctrl ', function ($scope) {
$scope. FirstName = "Tom";
$scope. LastName = "Son";
$scope. MyVar = false;
$scope. Toggle = function () {
$scope. MyVar =! $scope. MyVar;
};
});
</script>
</body>

vi.: Angularjs Events

Ng-click: Click on the event, click and then trigger the event.
<div ng-app= "" >
<p>
<button ng-click= "Count=count+1" > Click </button>
</p>
<p>
{{count}}
</p>
</div>

VII: Summary of Personnel information

CSS Styles section:

JS section:

});
</script>

View HTML section:

<body ng-app= "myApp" ng-controller= "Myctrl" >
<div>
<p style= "font-family: ' Microsoft ya Black '; Font-size: ' 20px ' >angularjs form </p>
<table>
<tr>
<th><input type= "checkbox" ng-click= "Checkall ();"/></th>
<th> Serial Number </th>
<th> name </th>
<th> Place of residence </th>
<th> Nationality </th>
<th> Operations </th>
</tr>
<TR ng-repeat= "x in Names | By: ' Country ' >
<td><input id= "checkboxes" type= "checkbox" name= "Check"/></td>
<td>{{$index +1}}</td>
<td>{{x.Name}}</td>
<td>{{x.City|lowercase}}</td>
<td>{{x.country| Uppercase}}</td>
<td><a href= "#" > Modify </a> <a href= "#" > Delete </a> <a href= "#" > Add </a></td>
</tr>
</table>
</div>
</body>

Angualrjs Learning Summary Three (HTTP, select, tables, directives, and events)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More