AngularJS Select(選項框) AngularJS 可是使用數組或對象創建一個下拉列表選項。使用ng-options創建選項框 在AngularJS 中我們可以使用ng-option指令來創建一個下拉列表,列表通過對象和數組迴圈輸出 實例: <div ng-app="myApp" ng- ...
AngularJS Select(選項框)
AngularJS 可是使用數組或對象創建一個下拉列表選項。
使用ng-options創建選項框
在AngularJS 中我們可以使用ng-option指令來創建一個下拉列表,列表通過對象和數組迴圈輸出
實例:
<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 與 ng-repeat
我們也可以使用ng-repeat指令來創建下拉列表
<select>
<option ng-repeat="x in name">{{x}}</option>
</select>
ng-repeat指令是通過數組來迴圈HTML 代碼來創建下拉列表,但ng-options指令更適合創建下拉列表,它有一下優勢
使用ng-options的選項的一個對象,ng-repeat是一個字元串。
應該用那個更好?
假設我們使用以下對象:
$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有局限性,選擇的值是一個字元串:
實例:
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x,url}}">{{x.site}}</option>
</select>
<h1>你選擇的是:{{selectedSite}}</h1>
實例:
使用ng-options:
<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
<h1>你選擇的是:{{selectedSite.site}}</h1>
<p>網址為:{{selectedSite.url}}</p>
當選擇值是一個對象時,我們就可以獲取更多信息,應用也更靈活。
數據源為對象
前面實例我們使用了數組作為數據源,以下我們將數據對象作為數據源。
$scope.sites = {
site01 :"Google",
site02:"Runoob",
site03 :"Taobao"
};
實例
使用對象作為數據源,x 為鍵(key),y為值(value);
<select ng-model="selectedSite" ng-options="x for (x,y) in sites">
</select>
<h1>你選擇的值是:{{selectedSite}}</h1>
你選擇的值在key-value對中的value
value 在key-value 對中也可以是個對象;
實例
選擇的值在key-value 對的value 中,這是 它是一個對象。
$scope.cars = {
car01 : {brand : "Ford",model :"Mustang", color :"red"},
car02 : {brand : "Fiat",model :"500", color :"white"},
car03 : {brand : "Fiat",model :"XC90", color :"black"},
}
在下拉菜單也可以不使用 key-value 對中的 key , 直接使用對象的屬性:
<select ng-model="selectedCar" ng-options="y.brand for (x,y) in sites "></select>
AngularJS 表格
ng-repeat 指令可以完美的顯示表格。
在表格中顯示數據
使用angular顯示表格是非常簡單的
實例
<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>
使用CSS樣式
為了讓頁面更加美觀,我們可以在頁面中使用CSS
css 樣式
<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>
使用 orderBy 過濾器
排序顯示,可以使用orderBy過濾器:
實例:
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
使用uppercase 過濾器
使用uppercase過濾器轉換為大寫
實例
<table>
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.Country | uppercase}}</td>
</tr>
</table>
顯示序號($index)
表格顯示序號可以在<td>中添加$index:
實例
<table>
<tr ng-repeat="x in names">
<td>{{$index + 1}}</td>
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
使用$even 和$odd
實例
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{x.Name}}</td>
<td ng-if="$even">{{x.Name}}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country}}</td>
<td ng-if="$even">{{x.Country}}</td>
</tr>
</table>
AngularJS SQL
使用PHP從MySQL 中獲取數據
實例:
<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/angularjs/data/Customers_MySQL.php")
.success(function (response) {$scope.names = response.records;});
})
</script>
跨域HTTP請求
如果你需要從不同的伺服器(不同的功能變數名稱)上獲取數據就需要使用跨域HTTP請求。
跨域請求在網頁上非常常見。很多網頁從不同伺服器上傳入CSS,圖片,Js 腳本等。
在現代瀏覽器中,為了數據的安全,所又請求被嚴格限制在同一功能變數名稱下,如果需要調用不同站點數據,需要通過跨域來解決。
以下的PHP代碼運行使用的網站進行跨域訪問。
header("Access-Control-Allow-Origin: *");