AngularJS（二）

最新推荐文章于 2021-10-27 10:31:47 发布

原创最新推荐文章于 2021-10-27 10:31:47 发布 · 408 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

学习记录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>