AngularJS（二）
學習記錄2017-06-13
學習目錄：
1、Http服務
2、Select下拉列表
3、HTML DOM
4、AngularJS模組
-----------------------------------------------------------------我是分界線------------------------------------------------------------------------
一、HTTP服務
$http 是 AngularJS中的一個核心服務，用於讀取遠端伺服器的資料。
<div ng-app="myApp" ng-controller="siteCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http({ method: 'GET', url: 'http://www.runoob.com/try/angularjs/data/sites.php' }).then(function successCallback(response) { $scope.names = response.data.sites; }, function errorCallback(response) { // 請求失敗執行程式碼 }); }); </script>
廢棄宣告 (v1.5)：v1.5 中$http 的 success 和 error 方法已廢棄。使用 then 方法替代。
1.5版本以下： var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/sites.php").success(function (response) {$scope.names = response.sites;}); }); 1.5版本以上-簡化： var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/sites.php") .then(function (response) {$scope.names = response.data.sites;}); });
二、select下拉框
AngularJS 可以使用陣列或物件建立一個下拉列表選項。有兩種實現方式：ng-options/ng-repeat。
<div ng-app="myApp" ng-controller="myCtrl"> <!-- ng-options:使用的是一個物件--> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select> <!-- ng-repeat：是一個字串 --> <select> <option ng-repeat="x in names">{{x}}</option> </select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); </script>
現在來分開看：ng-repeat 指令是通過陣列來迴圈HTML程式碼來建立下拉列表，但 ng-options 指令更適合建立下拉列表，它有以下優勢：使用 ng-options 的選項的一個物件， ng-repeat 是一個字串。
1.ng-options:使用物件有很大的不同，使用物件作為資料來源, x 為鍵(key), y 為值(value):
div ng-app="myApp" ng-controller="myCtrl">
<p>選擇網站:</p>
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你選擇的是: {{selectedSite.site}}</h1>
<p>網址為: {{selectedSite.url}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
2.ng-repeat:
<div ng-app="myApp" ng-controller="myCtrl">
<p>選擇網站:</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你選擇的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
三、HTML DOM
1.表格顯示序號可以在 <td> 中新增 $index:
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
</tr>
</table>
2.ng-disabled指令
3.ng-show指令：隱藏或顯示一個HTML元素
<div ng-app="">
<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>
</div>
也可以用表示式來計算布林值。<png-show="hour > 12">我是可見的。</p>
4.ng-hide指令：用於設定應用部分是否可見。和ng-show好像是一樣的。
<div ng-app="">
<p ng-hide="true">我是不可見的。</p>
<p ng-hide="false">我是可見的。</p>
</div>
同理：<p ng-hide=”myVar”> 也可以換成 <p ng-show=”myVar”>
5.ng-click指令：定義了angularJS的點選事件。
四、AngularJS模組
模組定義了一個應用程式，是應用控制器的容器，控制器通常屬於一個模組。
1、通過angular.module函式建立模組：var app = angular.module("myApp", []);
2、通過ng-controller指令新增控制器
3、一個完整的例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>