AngularJS第二日a
1、ng-repeat重复一个HTML元素
使用 ng-repeat 来循环数组
{{ x }}
< /div>
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
循环对象：
{{ x.name + ', ' + x.country }}
2、创建自定义指令 < body ng-app= "myApp" >
< runoob-directive > < /runoob-directive >
< script >
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "
自定义指令!
"};
});
< /script >
< /body > 讲解：使用.directive函数添加自定义的指令 调用自定义指令，HTML元素上需要添加自定义指令名称 使用驼峰法来命名一个指令，runoobDirective，但在使用它时需要以 - 分割，runoob-directive 元素名： < runoob-directive > < /runoob-directive > 属性： < div runoob-directive > < /div > 类名：<div class="runoob-directive"></div>
注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
注释：
注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
3、限制使用 var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "
自定义指令!
"};
}); 讲解： restrict值可以是以下几种 E：只限元素名使用 A：只限属性使用 C：只限类名使用 M：只限注释使用 restrict默认值为EA，即可通过元素名和属性名来调用指令 4、验证用户输入
在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。
讲解：提示信息会在ng-show属性返回true的情况下显示5、查看应用状态 Email:
不是一个合法的邮箱地址
编辑邮箱地址，查看状态的改变。
状态
Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。
Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。
Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。
讲解：ng-model指令可以为应用数据提供状态值(invalid, dirty, touched, error)；6、CSS类
编辑文本域，不同状态背景颜色会发送变化。
文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。
讲解：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作用域
{{carname}}
控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。
讲解： 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>
var app = angular.module( 'myApp', []);
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>
var app = angular.module( 'myApp', []);
app.controller( 'myCtrl', function($scope) {
$scope.names = [ "Emil", "Tobias", "Linus"];
});
< /script > 讲解：每个
9、根作用域
姓氏为 {{lastname}} 家族成员:
- {{x}} {{lastname}}
10、AngularJS控制器 名:
姓:
姓名: {{fullName()}} 讲解：AngularJS应用程序被控制器控制 ng-controller指令定义了应用程序控制器 控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建 AngularJS应用程序由ng-app定义，应用程序在内运行 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> 讲解：在大型应用中，通常是把控制器存储在外部文件中。示例中将控制器存储在了 personController.js 中 控制器文件：angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
12、AngularJS过滤器
姓名为 {{ lastName | uppercase }}
实例的运行结果是 DOE姓名为 {{ lastName | lowercase }}
实例的运行结果是 doe数量:
价格:
总价 = {{ (quantity * price) | currency }}
实例的运行结果是 $39.96循环对象:
-
{{ x.name + ', ' + x.country }}
13、输入过滤
输入过滤:
-
{{ (x.name | uppercase) + ', ' + x.country }}
14、AngularJS Service
当前页面的 url:
{{myUrl}}
该实例使用了内建的 $location 服务获取当前页面的 URL。
讲解：在AngularJS中，服务是一个函数或对象，可在应用中使用 $location服务，返回当前页面的URL地址 $location服务作为一个参数传递到controller中。如果要使用它，需要在controller中定义两秒后显示信息:
{{myHeader}}
$timeout 访问在规定的毫秒数后执行指定函数。
讲解：AngularJS $tineout服务对应了JS window.setTimeout函数 在规定的毫秒数后执行指定的函数现在时间是:
{{theTime}}
$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。
讲解：AngularJS $interval服务对应了JS window.setInterval函数 访问在指定的周期（以毫秒计）来调用函数或计算表达式。在实例中每隔1000毫秒输出一次当前时间的字符串255 的16进制是:
{{hex}}
自定义服务，用于转换16进制数：
讲解：创建自定义的访问（在实例中访问名为 “hexafy”），链接到当前的模块中 app.service( 'hexafy', function() {this.myFunc = function (x) {
return x.toString( 16);
}
}); 在实例中访问名为 “hexafy”，具体操作是将一个数字转化成一个16进制数
在过滤器中使用服务:
{{255 | myFormat}}
讲解：创建了自定义服务，并连接到应用后，可以在控制器，指令，过滤器或其他服务中使用它在获取数组 [255, 251, 200] 值时使用过滤器:
- {{x | myFormat}}
过滤器使用服务将10进制转换为16进制。
讲解：在对象数组中获取值时使用过滤器
15、AngularJS $http服务
欢迎信息:
{{myWelcome}}
$http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。
讲解：AngularJS $http服务是最常用的服务，该服务向服务器发送请求，应用响应服务器传送过来的数据 AngularJS 一直监控应用，处理事件变化，AngularJS使用$location服务比使用window.location对象更好 实例中的结果是 详细的$http讲解请查看 http://www.runoob.com/angularjs/angularjs-http.html16、AngularJS Select 讲解：使用ng-options指令创建一个下拉列表，列表项通过对象和数组循环输出 也可以使用ng-repeat指令来创建下拉列表 < 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> 使用ng-options：<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
选择的网站是:
你选择的值是: {{selectedSite}}
该实例演示了使用对象作为创建下拉列表。
讲解：使用数据对象作为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，car02，car03作为 key，进行选择 也可以直接不使用key，直接使用对象的属性 <select ng-model="selectedCar" ng-options="y.brand for (x, y) in sites"></select>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！