AngularJS第二日a

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 >

讲解：使用.directive函数添加自定义的指令

调用自定义指令，HTML元素上需要添加自定义指令名称

使用驼峰法来命名一个指令，runoobDirective，但在使用它时需要以 - 分割，runoob-directive

元素名： < runoob-directive > < /runoob-directive >

属性： < div runoob-directive > < /div >

类名：<div class="runoob-directive"></div>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>

注释：

<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>"
   };
});

讲解：

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>

<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

讲解：提示信息会在ng-show属性返回true的情况下显示

5、查看应用状态

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>

</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>

<form ng-app="" name="myForm">
输入你的名字:
<input name="myName" ng-model="myText" required>
</form>

<p>编辑文本域，不同状态背景颜色会发送变化。</p>
<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

</body>
</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作用域

<h1>{{carname}}</h1>

</div>

<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>

     var app = angular.module( 'myApp', []);
     app.controller( 'myCtrl', function($scope) {
           $scope.name = "John Dow";
     });

< /script >

8、Scope作用范围

var app = angular.module( 'myApp', []);
app.controller( 'myCtrl', function($scope) {
$scope.names = [ "Emil", "Tobias", "Linus"];
});

< /script >

讲解：每个<li>元素可以访问当前的重复对象，这里对应的是一个字符串，并使用变量 x 表示

9、根作用域

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

app.controller('myCtrl', function($scope, $rootScope) {
      $scope.names = ["Emil", "Tobias", "Linus"];
      $rootScope.lastname = "Refsnes";
});
  </script>

讲解：所有的应用都有一个根作用域（$rootScope），它可以作用在ng-app指令包含的所有HTML元素中

$rootScope可作用于整个应用中，是各个controller（javascript）中scope的桥梁。用rootScope定义的值，可以在各个Controller中使用

在实例中$rootScope在循环对象内外都可以访问

10、AngularJS控制器

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

讲解：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>

讲解：在大型应用中，通常是把控制器存储在外部文件中。示例中将控制器存储在了 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过滤器

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

实例的运行结果是 DOE

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

实例的运行结果是 doe

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

实例的运行结果是 $39.96

<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

实例的运行结果是循环对象：

Kai, Denmark

Jani, Norway

Hege, Sweden

讲解：AngularJS过滤器可用于转换数据

currency -- 格式化数字为货币格式

filter -- 从数组项中选择一个子集

lowercase -- 格式化字符串为小写

uppercase -- 格式化字符串为大写

orderBy --根据某个表达式排列数组（实例中是根据国家进行排列）

13、输入过滤

<ul>
   <li ng-repeat="x in names | filter:test | orderBy:'country'">
   {{ (x.name | uppercase) + ', ' + x.country }}
   </li>
</ul>

</div>

在文本框中输入内容，例如 “a” ，显示的结果 KAI, Denmark

JANI, Norway

讲解：输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称

根据输入的内容，自动筛选符合条件的数据

14、AngularJS Service

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的 url:</p>
<h3>{{myUrl}}</h3>
</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

讲解：在AngularJS中，服务是一个函数或对象，可在应用中使用

$location服务，返回当前页面的URL地址

$location服务作为一个参数传递到controller中。如果要使用它，需要在controller中定义

<p>两秒后显示信息:</p>

<h1>{{myHeader}}</h1>

</div>

<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>

讲解：AngularJS $tineout服务对应了JS window.setTimeout函数

在规定的毫秒数后执行指定的函数

<p>现在时间是:</p>

<h1>{{theTime}}</h1>

</div>

<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

讲解：AngularJS $interval服务对应了JS window.setInterval函数

访问在指定的周期（以毫秒计）来调用函数或计算表达式。在实例中每隔1000毫秒输出一次当前时间的字符串

</div>

<p>自定义服务，用于转换16进制数：</p>

app.service('hexafy', function() {
     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);
                 }
           });

在实例中访问名为 “hexafy”，具体操作是将一个数字转化成一个16进制数

<div ng-app="myApp">
在过滤器中使用服务:

<h1>{{255 | myFormat}}</h1>

</div>

</script>

讲解：创建了自定义服务，并连接到应用后，可以在控制器，指令，过滤器或其他服务中使用它

<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<p>过滤器使用服务将10进制转换为16进制。</p>
</div>

讲解：在对象数组中获取值时使用过滤器

15、AngularJS $http服务

<h1>{{myWelcome}}</h1>

</div>

<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

讲解：AngularJS $http服务是最常用的服务，该服务向服务器发送请求，应用响应服务器传送过来的数据

AngularJS 一直监控应用，处理事件变化，AngularJS使用$location服务比使用window.location对象更好

实例中的结果是

详细的$http讲解请查看 http://www.runoob.com/angularjs/angularjs-http.html

16、AngularJS Select

</div>

讲解：使用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>

<p>选择的网站是:</p>

<h1>你选择的值是: {{selectedSite}}</h1>

</div>

<p>该实例演示了使用对象作为创建下拉列表。</p>

var app = angular.module('myApp', []);
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，car02，car03作为 key，进行选择

也可以直接不使用key，直接使用对象的属性

猜你喜欢