Angularjs Foundation (v)

AngularJS Select (option box)
AngularJS but creates a drop-down list option using an array or an object.
Create an option box using Ng-options
In Angularjs we can use the Ng-option directive to create a drop-down list, with the list of objects and arrays looping through the output
Instance:
<div ng-app= "myApp" ng-controller= "Myctrl" >
<select ng-model= "Selectedname" ng-options= "X for in Names" ></select>
</div>
<script>
var app = Angular.module (' myApp ', []);
App.controller (' Myctrl ', function ($scope) {
$scope. Name = ["Google", "Runoob", "Taobao"];
})
</script>

Ng-options and Ng-repeat
We can also use the Ng-repeat directive to create a drop-down list
<select>
<option ng-repeat= "x in Name" >{{x}}</option>
</select>
The ng-repeat instruction uses an array to iterate through the HTML code to create a drop-down list, but the ng-options directive is more suitable for creating a drop-down list, which has the advantage
An object that uses the Ng-options option, Ng-repeat is a string.

should be better with that?
assumes that we use the following objects:
$scope. sites = [{site: ' Google ', url: ' http://www.google.com '},
$scope. Sites = [{site: ' runoob ', url: ' http://www.runoob.com '},
$scope. Sites = [{site: ' Taobao ', url: ' http://www.runoob.com '}]
Ng-repeat has limitations, the selected value is a string:
instance:
<select ng-model= "Selectedsite";
&L T;option ng-repeat= "x in Sites" value= "{{x,url}}" >{{X.SITE}}</OPTION>
</select>
& Lt;h1> you have chosen: {{selectedsite}} instance:
Using ng-options:
<select ng-model= "Selectedsi　　　　　　　　TE "ng-options=" X.site for x in Sites "></SELECT>
The <p> URL is: {{selectedsite.url}}</p>
when the selection value is an object, we can get more information and the application is more flexible.

The

data source is an object
Previous instance we used an array as the data source, and the following we use the data object as the data source.
$scope. Sites = {
Site01: "Google",
Site02: "Runoob",
Site03: "Taob AO "
};　　　　　　　　　　An
instance
uses an object as a data source, X is a key (key), and Y is a value (value);
<select ng-model= "Selectedsite" ng-options= "X for (x, y) in sites";
</select>
The value you select in the Key-value pair can also be an object in the Key-value pair;
The instance
selects the value in the Key-value pair value, which is the object that it is.
$scope. Cars = {
Car01: {brand: "Ford", Model: "Mustang", Color: "Red"},
C Ar02: {brand: "Fiat", Model: "$", Color: "White"},
Car03: {brand: "Fiat", Model: "XC90", Color: "Blac K "},
}
in the drop-down menu, you can also use the object's properties directly without using the key in the Key-value pair:
<select ng-model=" Selectedcar "ng- Options= "Y.brand for (x, y) in sites" ></SELECT>

AngularJS form
The Ng-repeat command can display the table perfectly.

Displaying Data in a table
Using angular to display the table is very simple
Instance
<div ng-myapp= "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://www.runoob.com/try/angularjs/data/Customers_JSON.php").
Success (function (response) {$scope. names = Response.records;});
})
</script>

Using CSS Styles
In order to make the page more beautiful, we can use CSS in the page
CSS Styles
<style>
table, Th, td{
BORDER:1PX solid Grey;
Border-collapse:collapse;
padding:5px;
}
Table Tr:nth-child (Odd) {
Background-color: #f1f1f1;
}
Table Tr:nath-child (even) {
Background-color: #ffffff;
}
</style>

Use the Filter by
To sort the display, you can use the Order by filter:
Instance:
<table>
<TR ng-repeat= "x in Names | By: ' Country ' >
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>

Using the Uppercase filter
Convert to uppercase using the uppercase filter
Instance
<table>
<TR ng-repeat= "x in Names" >
<td>{{x.Name}}</td>
<td>{{x.country | uppercase}}</td>
</tr>
</table>

Display Number ($index)
The table display sequence number can be added to the <td> $index:
Instance
<table>
<TR ng-repeat= "x in Names" >
<td>{{$index + 1}}</td>
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>

use $even and $odd
Instances
<table>
<tr ng-repeat= "x in Names";
< TD ng-if= "$odd" style= "Background-color: #f1f1f1" >{{X.NAME}}</TD>
<td ng-if= "$even" >{{x.name}}& Lt;/td>
<td ng-if= "$odd" style= "Background-color: #f1f1f1" >{{X.COUNTRY}}</TD>
<td N g-if= "$even" >{{X.COUNTRY}}</TD>
</tr>
</table>

AngularJS SQL
using PHP to get data from MySQL
instance:
<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://www.runoob.com/try/ang Ularjs/data/customers_mysql.php ")
. Success (function (response) {$scope. names = Response.records;});
})
</script>

Cross-Domain HTTP requests
If you need to get data from different servers (different domain names), you need to use cross-domain HTTP requests.
Cross-domain requests are very common on Web pages. Many Web pages are uploaded from different servers into CSS, pictures, Js scripts and so on.
In modern browsers, in order to secure the data, the request is strictly limited to the same domain name, if you need to call different site data, need to be resolved by cross-domain.
The following PHP code runs the Web site used for cross-domain access.
Header ("Access-control-allow-origin: *");

Angularjs Foundation (v)