学习记录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>
也可以用表达式来计算布尔值。<p ng-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>