HTML5混合App开发 PDF下载

AngularJS中常用的数据绑定类指令如表32所示。表32数据绑定类指令指令描述ngmodel用于将作用域范围内的数据绑定到表单控件ngbind使用给定的变量或表达式的值来替换 HTML 元素的内容，所有 HTML元素都支持ngbind指令ngapp、ngcontroller和ngmodel指令在本书第2章中已经演示过用法，这里不做单独演示。ngbind指令用于内容绑定，语法如下。在上述语法中，element是指HTML元素的名称，expression是指要执行的变量或表达式。ngbing指令的用法与插值语法“{{}}”有些相似，接下来通过一个案例来演示ngbind指令的具体用法，代码见demo31.html。demo31.html1234
5
678

17
18
＜script＞19//创建一个AngularJS模块20var app=angular.module(app, ［］)；21app.controller(MainController, function ($scope) {22//$scope 是AngularJS的控制器附带的“数据仓库”23$scope.data= his is data；24})；252627在上述代码中，第23行定义了属性data，值为this is data；第11行和第14行分别使用插值语法和ngbind指令获取data值。打开Chrome浏览器，访问demo31.html，页面效果如图31所示。图31demo31.html页面效果在图31中可以看到，使用两种方法取值显示的效果是一样的。3.2.2状态设置类指令AngularJS中的状态设置类指令用于改变HTML元素的显示状态，包括为元素绑定样式、设置元素只读和禁用、设置显示和隐藏等。常用的状态设置类指令如表33所示。表33状态设置类指令指令描述ngstyle用于为HTML元素添加style属性ngclass用于给HTML元素动态绑定一个或多个CSS类ngreadonly用于设置表单域（input或textarea）的readonly（只读）属性ngdisabled用于设置表单输入字段（input、select或 textarea）的disabled属性nghide用于设置隐藏HTML元素ngshow用于设置显示HTML元素1. ngstylengstyle指令用于样式的绑定，语法如下。在上述语法中，expression表达式返回由CSS属性和值组成的对象，即keyvalue形式的对象。为了让读者有更好的理解，接下来通过一个案例来演示ngstyle指令的具体用法，代码见demo32.html。demo32.html1234
5
678

15
16
＜script＞17//创建一个AngularJS模块18var app=angular.module(app, ［］)；19app.controller(mainController, function ($scope) {20//在作用域内定义样式属性myStyle21$scope.myStyle={22 "background-color": "yellow",23 "width":"100px",24 "282930在上述代码中，第21～26行在作用域中定义了样式对象myStyle。在myStyle对象中可以使用keyvalue形式来定义CSS样图32demo32.html页面效果式，每个keyvalue的key可以去掉双引号，但是去掉双引号后key中包含的“”符号会报语法错误。因此，可以将key改写成驼峰式，例如将backgroundcolor改写成backgroundColor。第10行使用ngstyle指令绑定myStyle对象，并且使用div元素的style属性设置了div元素的高度。需要注意的是，ngstyle属性与HTML元素的style属性可以同时使用。打开Chrome浏览器，访问demo32.html，页面效果如图32所示。2. ngclassngclass指令用于绑定动态CSS类，语法如下。在上述语法中，ngclass指令的值可以是字符串、对象或数组。如果是字符串，多个类名使用空格分隔；如果是对象，需要使用keyvalue形式，key为要添加的类名，value是一个布尔类型的值（只有在value值为true时，该类才会被添加）；如果是数组，数组的元素可以是字符串或对象。接下来通过一个案例来演示ngclass指令的具体用法，代码见demo33.html。demo33.html1234
5
6

202122

30
31
＜script＞32//创建一个AngularJS模块33var app=angular.module(app, ［］)；34app.controller(mainController, function ($scope) {35//创建classOptions对象，对已经有的CSS样式设置是否开启36$scope.classOptions={37"myColor":true,38"myDiv":true,39"myBorder":true40}41})；424344在上述代码中，第8～18行定义了三组样式（.myColor、.myDiv和.myBorder）；第36～40行定义了classOptions对象，在该对象上设置是否启用样式（true为启用，flase为禁用）；第25行使用ngclass指令绑定classOptions对象，与ngstyle类似，这里的key值也可以去掉引号，但是去掉引号后不能包括“”，否则会出现语法错误。打开Chrome浏览器，访问demo33.html，页面效果如图33所示。修改demo33.html中的第39行，将myBorder设置为false，那么div元素将会被去掉边框，此时的页面效果如图34所示。图33demo33.html页面效果图34去掉边框的页面效果

3. ngshow和nghide在JavaScript中，通过设置HTML元素的display值来控制元素的显示和隐藏；AngularJS的指令nghide和ngshow也可以实现这样的功能，使用两个指令的语法如下。在上述语法中，expression表达式返回的值是布尔类型。ngshow指令绑定值为true时显示HTML元素。为false时隐藏HTML元素。nghide指令绑定值为true时隐藏HTML元素，为false时显示HTML元素。所有的HTML元素都支持ngshow和nghide指令。接下来通过一个案例来演示ngshow和nghide指令的具体用法，代码见demo34.html。demo34.html1234
5
678

28
29
＜script＞30var app=angular.module(app,［］)；31app.controller(MainController,function($scope){32 //定义两个boolean类型的属性33$scope.myTrue=true；34$scope.myFalse=false；35})；363738在上述语法中，第10～25行定义了4个div，并且在div上分别用ngshow和nghide指令绑定了myTrue和图35demo34.html页面效果myFalse。打开Chrome浏览器，访问demo34.html，页面效果如图35所示。在图35中可以看出，绑定ngshow="myTrue"和nghide="myFalse"的两个div显示出来了。4. ngreadonly和ngdisabled在AngularJS中，ngreadonly和ngdisabled指令用于设置元素的只读和无效状态，与JavaScript相同，只读和无效状态是针对输入框的。只读状态下，输入框的数据不能编辑，但是会被表单提交；而无效状态下，输入框的数据不能编辑，也不会被提交。使用ngreadonly和ngdisabled指令的语法如下。

在上述语法中，expression表达式返回的值是布尔类型。ngreadonly指令返回值为true时用于设置输入框的只读状态，ngdisabled指令返回值为true时用于设置输入框的无效状态。接下来通过一个案例来演示ngreadonly和ngdisabled指令的具体用法，代码见demo35.html。demo35.html1234
5
678

20
21
＜script＞22//创建一个AngularJS模块23var app=angular.module(app, ［］)；24app.controller(MainController, function ($scope) {25//定义属性text用于绑定ng-model26$scope.text=some text；27//定义属性boolean用于绑定ng-readonly和on-disabled28$scope.boolean=true；29})；303132在上述代码中，第26行定义了属性text用于绑定ngmodel；第28行定义了属性boolean用于绑定到ngreadonly图36demo35.html页面效果和ngdisabled；第11行使用ngmodel指令将text属性绑定到input输入框，并使用ngreadonly指令设置输入框为只读状态；第13行使用ngmodel指令将text属性绑定到input输入框，并使用ngdisabled指令设置输入框为无效状态。打开Chrome浏览器，访问demo35.html，页面效果如图36所示。在图36中，第一个输入框的状态是只读，第二个输入框的状态是无效，两个输入框的some text内容都不能编辑。单击“提交”按钮提交表单，观察地址栏，如图37所示。图37表单提交效果从图37中可以看出，只有id1的数据被提交了，说明只读输入框中的数据被提交了，而无效状态输入框中的数据没有被提交。3.2.3事件绑定类指令AngularJS中用于事件绑定功能指令的名称与JavaScript的事件名称非常类似，AngularJS中常用的事件绑定类指令如表34所示。表34事件绑定类指令指令描述ngclick用于指定鼠标单击HTML元素时需要执行的操作，所有HTML元素都支持该指令ngdblclick用于指定鼠标双击HTML元素时需要执行的操作，所有HTML元素都支持该指令ngfocus用于指定HTML元素获取焦点时需要执行的操作，支持、、、和window对象ngblur用于指定HTML元素失去焦点时需要执行的操作，支持<；a>；、<；input>；、<；select>；、<；textarea>；和window对象ngchange用于指定HTML元素值改变时需要执行的操作，支持<；input>；、<；select>；和<；textarea>；标签需要注意的是，上述指令都不会覆盖JavaScript的事件，例如鼠标单击HTML元素时，ngclick指令与JavaScript的onclick事件都会执行。1. ngclick接下来通过一个案例来演示ngclick指令的使用效果，代码见demo36.html。demo36.html1<；!DOCTYPE html>；2<；html lang="en">；3<；head>；4<；meta charset="UTF-8">；5<；title>；ng-click<；/title>；6<；/head>；7<；body>；8<；div ng-app="app">；9<；div ng-controller="mainController">；10<；span ng-bind="message">；<；/span>；11<；br/>；12 <；button ng-click="clickHandler()" onclick="onclickHandler()">；按钮<；/button>；13<；/div>；14<；/div>；15<；script src="lib/angular.js">；<；/script>；16<；script>；17//创建一个AngularJS模块18var app=angular.module(app, ［］)；19app.controller(mainController, function ($scope) {20//定义属性message,用于绑定在span标签上21$scope.message="等待操作"；22//定义ng-click需要绑定的事件处理函数23$scope.clickHandler=function () {24$scope.message=<br /> g-click事件被触发25}26})；27//定义onclick事件触发调用的函数28function onclickHandler() {29console.log("onclick事件被触发")；30}31<；/script>；32<；/body>；33<；/html>；在上述代码中，第21行定义了message属性，用于在第10行绑定ngbind指令；第23～25行定义了clickHandler()函数用于绑定ngclick指令，在函数内修改message属性；第28～30行定义了onclickHandler()函数用于绑定onclick事件；第12行代码用于在button上同时绑定ngclick和onclick事件。打开Chrome浏览器，访问demo36.html，页面效果如图38所示。在图38中，message属性的值显示为“等待操作”。按F12键打开开发人员工具，单击Console菜单，页面效果如图39所示。图38demo36.html页面效果图39控制台<；br />；<；br />；在图39中，单击“按钮”，页面效果如图310所示。图310事件触发在图310中可以看出，message属性值从“等待操作”变为“ngclick事件被触发”；控制台也输出了“onclick事件被触发”，说明AngularJS中的事件与JavaScript事件可以同时被触发。2. ngchangeAngularJS中用于事件绑定的指令的用法都很相似，但是ngchange与其他指令有所不同，它需要与ngmodel指令搭配使用。接下来通过一个案例来演示ngchange指令的具体用法，代码见demo37.html。demo37.html1<；!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>ng-change</title>6</head>7<body ng-app="myApp">8<div ng-controller="mainController">9<p>在输入框中输入一些信息:</p>10<input type="text" ng-change="myFunc()" ng-model="myValue" />11<p>{{message}} </p>12</div>13<script src="lib/angular.js"></script>14<script>15angular.module(myApp, ［］)16.controller(mainController, function($scope) {17//定义属性message，用于插值语法18 $scope.message="等待操作";19//定义函数用于绑定ng-change指令20 $scope.myFunc=function() {21$scope.message="输入框被修改了";22};23});24</script>25</body>26</html>在上述代码中，第18行定义了属性message；第11行使用插值语法获取message属性的值；第20～22行定义了myFunc()函数用于绑定ngchange指令；第10行为input控件绑定ngchange事件并指定了ngmodel。当input控件被修改时，会触发ngchange事件，并调用myFunc()函数，将message属性值修改为“输入框被修改了”。打开Chrome浏览器，访问demo37.html，页面效果如图311所示。在图311中，message属性的值显示为“等待操作”。在输入框中输入hello，“等待操作”变为“输入框被修改了”，说明ngchange绑定的myFunc()函数被成功调用了，如图312所示。图311demo37.html页面效果图312输入框被修改<br /><br /><br />3.2.4访问流程类指令AngularJS中和访问流程相关的常用指令如表35所示。表35访问流程类指令指令描述ngif用于if条件判断。如果if条件的判断结果为true，则在页面中添加HTML元素；反之，则不在页面中添加该HTML元素ngswitch用于分支判断，该指令根据表达式显示或隐藏对应的部分ngrepeat用于循环集合，输出指定次数的HTML元素，这里的集合必须是数组或对象1. ngifngif指令能够通过条件判断动态地添加或移除元素。不同于ngshow和nghide的显示/隐藏元素，ngif是从DOM中移除元素或者向DOM中添加元素。使用ngif指令的语法如下。<element ng-if="expression"></element>在上述语法中，element代表任意HTML元素。如果expression表达式返回true，则会在页面上添加该HTML元素；如果为false，则不会在页面上添加该HTML元素。接下来通过一个案例来演示ngif指令的具体用法，代码见demo38.html。demo38.html1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>ng-if</title>6</head>7<body ng-app>8添加 HTML: 9<!--使用ng-init初始化属性myVar，值为false-->10<input type="checkbox" ng-model="myVar" ng-init="myVar=false">11<div ng-if="myVar">12<h1>我来了</h1>13</div>14<script src="lib/angular.js"></script>15</body>16</html>在上述代码中，第10行定义了一个checkbox，使用nginit初始化变量myVar的值为false并使用ngmodel将myVar与checkbox绑定，当checkbox被勾选时，myVar值变为true；第11行使用ngif绑定myVar，当myVar值为true时，显示div元素下的内容。打开Chrome浏览器，访问demo38.html，页面效果如图313所示。在图313中，勾选复选框后显示“我来了”，页面效果如图314所示。图313demo38.html页面效果图314添加HTML成功<br /><br /><br />2. ngswitchngswitch指令的使用需要搭配子元素的ngswitchwhen指令，语法如下。<element ng-switch="expression"><element ng-switch-when="value"></element><element ng-switch-when="value"></element><element ng-switch-when="value"></element><element ng-switch-default></element></element>在上述语法中，如果表达式expression的返回值与某个ngswitchwhen的value值匹配，则会在HTML页面上添加绑定的HTML元素。为了让读者有更好的理解，接下来通过一个案例来演示ngswitch的具体用法，代码见demo39.html。demo39.html1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>ng-switch</title>6</head>7<body>8<div ng-app="app">9<div ng-controller="mainController">10<div ng-switch="name">11<div ng-switch-when="张三">12this is 张三13</div>14<div ng-switch-when="李四">15this is 李四16</div>17<div ng-switch-default>18找不到此人19</div>20</div>21</div>22</div>23<script src="lib/angular.js"></script>24<script>25var app=angular.module(app, ［］);26app.controller(mainController, function ($scope) {27$scope.name="李四"28});29</script>30</body>31</html>在上述代码中，第10～20行是一个完整的ngswitch流程；第27行定义了name属性；第10行使用ngswitch指令绑定name属性，因为name属性的初始值为李四，所以第14～16行的div元素将被显示到页面上。打开Chrome浏览器，访问demo39.html，页面效果如图315所示。将demo39.html中第27行的name值修改为ngswitchwhen条件中不包含的值，例如将27行修改为 $scope.name =“王五”。由于ngswitchwhen条件中不包含值“王五”，所以这时页面将显示绑定到ngswitchdefault指令的内容“找不到此人”，如图316所示。图315demo39.html页面效果图316执行ngswitchdefault指令<br /><br /><br />3. ngrepeat指令ngrepeat指令属于访问流程类指令，可以用来遍历集合，要求集合必须是数组或者对象，语法如下。<element ng-repeat="expression"></element>在上述语法中，expression表达式用于定义循环集合的方式。//遍历数组item in collection//遍历对象(key, value) in collection在上述方式中，collection（集合）中可能有多条记录，ngrepeat指令可以每次从集合collection中取出一条记录item。如果item中的数据是以keyvalue形式存储，便可以通过item.key形式取出value值并添加到HTML模板。每个item实例都有自己的作用域，在该作用域内可以使用一些特殊的属性，如表36所示。表36模板实例属性属性取值类型描述$indexNumber循环元素的索引，值为0～集合的length-1$firstBoolean循环元素在迭代器的第一个，该值为true$middleBoolean循环元素在迭代器的中间，该值为true$lastBoolean循环元素在迭代器的最后一个，该值为true$evenBoolean如果迭代器的$index是偶数，该值为true$oddBoolean如果迭代器的$index是奇数，该值为truengrepeat遍历数组和遍历对象时的语法有所区别，接下来分别为读者介绍。① 遍历数组。通过一个案例演示ngrepeat遍历数组的具体用法，代码见demo310.html。demo310.html1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>ng-repeat</title>6</head>7<body>8<div ng-app="demo">9<div ng-controller="MainController">10<table style="border: solid 1px">11<tr>12<th>姓名</th>13<th>性别</th>14<th>年龄</th>15<th>相关信息</th>16</tr>17<!--ng-repeat会为每一个item都绑定一个作用域。18作用域中除了指定的每一项的数据对象外，还有$index、$first、$last等数据，19这些都是AngularJS自动生成的-->20<tr ng-repeat="item in users">21<td>{{item.name}}</td>22<td>{{item.sex}}</td>23<td>{{item.age}}</td>24<td>index:{{$index}}, first:{{$first}}, last:{{$last}}, 25middle:{{$middle}}, even:{{$even}}, odd:{{$odd}}</td>26</tr>27</table>28</div>29</div>30<script src="lib/angular.js"></script>31<script>32var demo=angular.module(demo, ［］);33demo.controller(MainController, function ($scope) {34 //定义数组users35$scope.users=［36{name: "张三", sex: "男", age: 24},37{name: "李四", sex: "女", age: 13},38{name: "王五", sex: "男", age: 38},39{name: "赵六", sex: "女", age: 55}40］;41});42</script>43</body>44</html>在上述代码中，第35～40行定义数组users，数组中包含4条个人信息记录，数据由keyvalue形式组成；第20～26行使用ngrepeat指令对数组进行遍历，每取出一条记录，table会增加一个tr，并且在每个td中显示相应的信息。打开Chrome浏览器，访问demo310.html，页面效果如图317所示。图317demo310.html页面效果从图317中可以看出，数组中的数据被成功遍历了，在相关信息中可以找到每一项模板实例相关属性的值。② 数组值重复的解决方法（track by）。ngrepeat指令遍历数组时要求每个元素值必须是唯一的，否则将会在浏览器控制台中提示有关数组中有重复值的错误消息。为了解决该问题，ngrepeat指令中提供了track by功能，这是ngrepeat指令的默认跟踪行为，读者可以通过$index属性来跟踪集合中的每一项。使用track by功能后，数组中重复的值便可以成功输出，语法如下。item in collection track by $index (item);为了更好地理解，接下来通过一个案例来演示track by的具体使用方法，代码见demo311.html。demo311.html1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>track by</title>6</head>7<body>8<div ng-app="demo">9<div ng-controller="MainController">10<table>11<!--遍历数组-->12<tr ng-repeat="item in numbers track by $index">13<td>{{item}}</td>14<td>$index:{{$index}}</td>15</tr>16</table>17</div>18</div>19<script src="lib/angular.js"></script>20<script>21var demo=angular.module(demo, ［］);22demo.controller(MainController, function ($scope) {23//定义数组24$scope.numbers=［1,1,4,2,5］;25});26</script>27</body>28</html>在上述代码中，第24行定义了一个数组；第12～15行使用track by功能对该数组进行遍历，其中第14行输出了每图318demo311.html页面效果条数据的索引值。打开Chrome浏览器，访问demo311.html，页面效果如图318所示。从图318可以看出，数组中的重复值（两个1）都被输出到页面上，说明track by可以解决ngrepeat指令遍历数组时遇到重复值报错的问题。③ 遍历对象。除遍历数组外，ngrepeat还可以遍历对象。接下来通过一个案例来演示ngrepeat遍历对象的方法，代码见demo312.html。demo312.html1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>ng-repeat</title>6</head>7<body>8<div ng-app="demo">9<div ng-controller="MainController">10<table style="border: solid 1px">11<tr>12<th>姓名</th>13<th>性别</th>14<th>年龄</th>15</tr>16<tr ng-repeat="(key,value) in users">17<td>{{key}}</td>18<td>{{value.sex}}</td>19<td>{{value.age}}</td>20</tr>21</table>22</div>23</div>24<script src="lib/angular.js"></script>25<script>26var demo=angular.module(demo, ［］);27demo.controller(MainController, function ($scope) {28$scope.users={29"张三": {age: 24, sex: "男"},30"李四": {age: 13, sex: "女"},31"王五": {age: 38, sex: "男"},32"赵六": {age: 55, sex: "女"}33}34});35</script>36</body>37</html>图319demo312.html页面效果在上述代码中，第28～33行定义了对象users；第16～20行遍历users对象，这里的key为对象中的姓名。value中包含年龄和性别，所以使用value.age获取年龄，value.sex获取性别。该案例使用ngrepeat遍历了users对象。打开Chrome浏览器，访问demo312.html，页面效果如图319所示。3.2.5加载处理类指令AngularJS中的加载处理类指令用于解决AngularJS应用在加载时代码未加载完的问题，常用指令如表37所示。表37加载处理类指令指令描述ngcloak用于防止AngularJS应用加载时，因代码未加载完成而出现闪烁的问题ngsrc用于覆盖img元素的src属性。例如在开发中，如果某个src的值中有AngularJS代码，则会使用ngsrc而不是src。ngsrc指令确保AngularJS代码执行前不显示图片nghref用于覆盖原生的a元素的href 属性。例如在开发中，如果href的值中有AngularJS代码，则会使用nghref而不是href。即使在AngularJS执行代码前单击链接，nghref指令也可以确保链接是正常的AngularJS应用在加载时，需要等待DOM加载完成之后才回去解析HTML。HTML页面中可能会由于AngularJS代码未加载完，而显示类似{{expression}}的AngularJS代码，进而在浏览器中出现闪烁的问题。表37中介绍的ngcloak指令可以用来解决此问题。在学习ngcloak的用法之前，首先来演示一下AngularJS代码未加载完成时出现的闪烁效果，代码见demo313.html。demo313.html1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">