1、ng-repeat重复一个HTML元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
< /div>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
2、创建自定义指令
<
body
ng-app=
"myApp"
>
< runoob-directive > < /runoob-directive >
< script >
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
< /script >
< /body >
< runoob-directive > < /runoob-directive >
< script >
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
< /script >
< /body >
讲解:使用.directive函数添加自定义的指令
调用自定义指令,HTML元素上需要添加自定义指令名称
使用驼峰法来命名一个指令,runoobDirective,但在使用它时需要以 - 分割,runoob-directive
元素名:
<
runoob-directive
>
<
/runoob-directive
>
属性:
<
div
runoob-directive
>
<
/div
>
类名:<div class="runoob-directive"></div>
<body ng-app="myApp">
<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
<p><strong>注意:</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>
</body>
注释:<!-- 指令: runoob-directive -->
<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
<p><strong>注意:</strong> 我们需要在该实例添加 <strong>replace</strong> 属性, 否则评论是不可见的。</p>
<p><strong>注意:</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>
</body>
3、限制使用
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
讲解:
restrict值可以是以下几种
E:只限元素名使用
A:只限属性使用
C:只限类名使用
M:只限注释使用
restrict默认值为EA,即可通过元素名和属性名来调用指令
4、验证用户输入
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
<p>在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。</p>
讲解:提示信息会在ng-show属性返回true的情况下显示
5、查看应用状态
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
<p>编辑邮箱地址,查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
<input type="email" name="myAddress" ng-model="myText" required>
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
<p>编辑邮箱地址,查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
</form>
讲解:ng-model指令可以为应用数据提供状态值(invalid, dirty, touched, error);
6、CSS类
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
input.ng-invalid {
background-color: lightblue;
}
input.ng-valid {
background-color: red;
}
</style>
</head>
<body>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
input.ng-invalid {
background-color: lightblue;
}
input.ng-valid {
background-color: red;
}
</style>
</head>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myName" ng-model="myText" required>
</form>
输入你的名字:
<input name="myName" ng-model="myText" required>
</form>
<p>编辑文本域,不同状态背景颜色会发送变化。</p>
<p>文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。</p>
<p>文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。</p>
</body>
</html>
</html>
讲解:node-model指令基于他们的状态为HTML元素提供了CSS类(实例中当未输入内容时背景颜色为蓝色,输入内容后背景颜色为红色)
ng-model指令根据表单域的状态添加/移除以下类
ng-empty / ng-not-empty
ng-touched / ng-untouched
ng-valid / ng-invalid
ng-dirty ng-pending ng-pristine
7、Scope作用域
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>控制器中创建一个属性名 "carname",对应了视图中使用 {{ }} 中的名称。</p>
讲解:
Scope(作用域)是应用在HTML(视图)和javascript(控制器)之间的纽带。它是一个对象,有可用的方法和属性
当在控制器中添加了 $Scope 对象时,视图(HTML)可以获取这些属性
当在视图中时,不需要添加 $Scope 前缀,只需要添加属性名即可,如{{carname}}
Scope应用组成如下:
View(视图),即HTML
Model(模型),即当前视图中可用的数据
Controller(控制器),即javascript函数,可以添加或修改属性
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module(
'myApp', []);
app.controller( 'myCtrl', function($scope) {
$scope.name = "John Dow";
});
app.controller( 'myCtrl', function($scope) {
$scope.name = "John Dow";
});
<
/script
>
8、Scope作用范围
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module(
'myApp', []);
app.controller( 'myCtrl', function($scope) {
$scope.names = [ "Emil", "Tobias", "Linus"];
});
app.controller( 'myCtrl', function($scope) {
$scope.names = [ "Emil", "Tobias", "Linus"];
});
<
/script
>
讲解:每个<li>元素可以访问当前的重复对象,这里对应的是一个字符串,并使用变量 x 表示
9、根作用域
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
讲解:所有的应用都有一个根作用域($rootScope),它可以作用在ng-app指令包含的所有HTML元素中
$rootScope可作用于整个应用中,是各个controller(javascript)中scope的桥梁。用rootScope定义的值,可以在各个Controller中使用
在实例中$rootScope在循环对象内外都可以访问
10、AngularJS控制器
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
讲解:AngularJS应用程序被控制器控制
ng-controller指令定义了应用程序控制器
控制器是JavaScript对象,由标准的JavaScript对象的构造函数创建
AngularJS应用程序由ng-app定义,应用程序在<div>内运行
ng-controller="myCtrl"属性是一个AngularJS指令,用于定义一个控制器
myCtrl函数是一个JavaScript函数
AngularJS使用$scope对象来调用控制器
在AngularJS中,$scope是一个应用象(属于应用变量和函数)
控制器的$scope(相当于作用域、控制范围)用来保存AngularJS Model(模型) 的对象
控制器在作用域 中创建了三个属性(firstName、lastName 和 fullName)
ng-model指令绑定输入域到控制器的属性(firstName 和 lastName)
控制器里面可以有方法(变量和函数)
11、外部文件中的控制器
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
讲解:在大型应用中,通常是把控制器存储在外部文件中。示例中将控制器存储在了 personController.js 中
控制器文件:angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
12、AngularJS过滤器
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
<script src="personController.js"></script>
实例的运行结果是 DOE
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
<script src="personController.js"></script>
实例的运行结果是 doe
<div ng-app="myApp" ng-controller="costCtrl">
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 4;
$scope.price = 9.99;
});
</script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 4;
$scope.price = 9.99;
});
</script>
实例的运行结果是 $39.96
<div ng-app="myApp" ng-controller="namesCtrl">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
实例的运行结果是 循环对象:
Kai, Denmark
Jani, Norway
Hege, Sweden
讲解:AngularJS过滤器可用于转换数据
currency -- 格式化数字为货币格式
filter -- 从数组项中选择一个子集
lowercase -- 格式化字符串为小写
uppercase -- 格式化字符串为大写
orderBy --根据某个表达式排列数组(实例中是根据国家进行排列)
13、输入过滤
<div ng-app="myApp" ng-controller="namesCtrl">
<p>输入过滤:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
在文本框中输入内容,例如 “a” ,显示的结果 KAI, Denmark
JANI, Norway
讲解:输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称
根据输入的内容,自动筛选符合条件的数据
14、AngularJS Service
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
讲解:在AngularJS中,服务是一个函数或对象,可在应用中使用
$location服务,返回当前页面的URL地址
$location服务作为一个参数传递到controller中。如果要使用它,需要在controller中定义
<div ng-app="myApp" ng-controller="myCtrl">
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
讲解:AngularJS $tineout服务对应了JS window.setTimeout函数
在规定的毫秒数后执行指定的函数
<div ng-app="myApp" ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
讲解:AngularJS $interval服务对应了JS window.setInterval函数
访问在指定的周期(以毫秒计)来调用函数或计算表达式。在实例中每隔1000毫秒输出一次当前时间的字符串
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务,用于转换16进制数:</p>
<script>
var app = angular.module('myApp', []);
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
讲解:创建自定义的访问(在实例中访问名为 “hexafy”),链接到当前的模块中
app.service(
'hexafy',
function() {
this.myFunc = function (x) {
return x.toString( 16);
}
});
this.myFunc = function (x) {
return x.toString( 16);
}
});
在实例中访问名为 “hexafy”,具体操作是将一个数字转化成一个16进制数
<div ng-app="myApp">
在过滤器中使用服务:
在过滤器中使用服务:
<h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
讲解:创建了自定义服务,并连接到应用后,可以在控制器,指令,过滤器或其他服务中使用它
<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
讲解:在对象数组中获取值时使用过滤器
15、AngularJS $http服务
<div ng-app="myApp" ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息,返回的值放入变量 "myWelcome" 中。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
讲解:AngularJS $http服务是最常用的服务,该服务向服务器发送请求,应用响应服务器传送过来的数据
AngularJS 一直监控应用,处理事件变化,AngularJS使用$location服务比使用window.location对象更好
实例中的结果是
详细的$http讲解请查看
http://www.runoob.com/angularjs/angularjs-http.html
16、AngularJS Select
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
讲解:使用ng-options指令创建一个下拉列表,列表项通过对象和数组循环输出
也可以使用ng-repeat指令来创建下拉列表
<
select
>
< option ng-repeat= "x in names" > {{x}} < /option >
< /select >
< option ng-repeat= "x in names" > {{x}} < /option >
< /select >
ng-repeat指令是通过数组来循环HTML代码来创建下拉列表
使用ng-repeat选择的是一个字符串,使用ng-options选择的是一个对象
$scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {site : "Taobao", url : "http://www.taobao.com"}];
使用ng-repeat:<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
<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>
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择的网站是:</p>
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
</select>
<h1>你选择的值是: {{selectedSite}}</h1>
</div>
<p>该实例演示了使用对象作为创建下拉列表。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
</script>
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
</script>
讲解:使用数据对象作为ng-options的数据源,其中 x 为键(key),y 为值(value)
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
在上面代码中,以car01,car02,car03作为 key,进行选择
<select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select>
也可以直接不使用key,直接使用对象的属性
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in sites"></select>