AngularJS学习笔记四
列表、表格以及其他迭代元素
ng-repeat指令可以根据集合中的项目一次创建一组元素的多分拷贝。不管在什么地方，只要我们想创建一组事物的列表，我们就可以使用这条
指令。例如：
1: <body ng-app>
2: <ul ng-controller="StudentListController">
3: <li ng-repeat="student in students"><a href="/student/view/{{student.id}}">{{student.name}}</a></li>
4: </ul>
5: <script type="text/javascript" src="angular.min.js"></script>
6: <script type="text/javascript">
7: function StudentListController($scope){
8: $scope.students=[9: {name:‘Mary Contrary‘,id:1},
10: {name:‘Jack Sprat‘,id:2},
11: {name:‘Jill Hill‘,id:3}
12: ] 13: }14: </script>
15: </body>
结果如下：
修改学生信息数组会自动刷新渲染的列表，我们可以往列表里插入一条学生信息：
1: <!DOCTYPE html>
2: <html ng-app>
3: <head lang="en">
4: <meta charset="UTF-8">
5: <title></title>
6: </head>
7: <body ng-controller="StudentListController">
8: <ul>
9: <li ng-repeat="student in students"><a href="/student/view/{{student.id}}">{{student.name}}</a></li>
10: </ul>
11: <button ng-click="insertSomeOne()">Insert</button>
12: <script type="text/javascript" src="angular.min.js"></script>
13: <script type="text/javascript">
14: function StudentListController($scope){
15: $scope.students=[16: {name:‘Mary Contrary‘,id:1},
17: {name:‘Jack Sprat‘,id:2},
18: {name:‘Jill Hill‘,id:3}
19: ];20: $scope.insertSomeOne=function(){
21: $scope.students.splice(1,0,{name:"someOne",id:4})
22: } 23: }24: </script>
25: </body>
26: </html>
ng-repeat指令可以通过$index返回当前引用的元素序号；还可以通过$filter、$middle及$last,ng-repeat指令返回布尔值,告诉你当前
元素是否是集合中的第一个元素、中间的某个元素，或者最后一个元素。我们可以在表格中显示出行号：
1: <!DOCTYPE html>
2: <html ng-app>
3: <head lang="en">
4: <meta charset="UTF-8">
5: <title></title>
6: </head>
7: <body>
8: <table ng-controller="StudentListController">
9: <tr ng-repeat="student in students">
10: <td>{{student.name}}</td>
11: <td>{{student.age}}</td>
12: <td>{{$index+1}}</td>
13: </tr>
14: </table>
15: <script type="text/javascript" src="angular.min.js"></script>
16: <script type="text/javascript">
17: function StudentListController($scope){
18: $scope.students=[19: {name:‘Mary Contrary‘,age:12},
20: {name:‘Jack Sprat‘,age:22},
21: {name:‘Jill Hill‘,age:31}
22: ]; 23: }24: </script>
25: </body>
26: </html>
隐藏和显示
我们可以通过ng-show和ng-hide这两条指令来实现，但是运行效果正好相反，他们都可以根据你所传的表达式来显示或者隐藏元素。
ng-show在表达式为true的时候会显示元素，为false的时候会隐藏元素；而ng-hide则恰恰相反。他们的原理是根据实际情况把元素的
样式设置为display: block来显示元素；设置display: none 来隐藏元素。
CSS类和样式
我们同样可以动态设置CSS类和样式，只要使用{{}}插值语法把他们进行数据绑定即可。我们甚至可以在模板中构造CSS类名的部分匹配方式：
1: <!DOCTYPE html>
2: <html ng-app>
3: <head lang="en">
4: <meta charset="UTF-8">
5: <title></title>
6: <style>
7: .menu_disabled_true{ 8: color:gray; 9: }10: </style>
11: </head>
12: <body>
13: <div ng-controller="deathrayMenuController">
14: <ul>
15: <li class="menu_disabled_{{isDisabled}}" ng-click="stun()"></li>
16: </ul>
17: </div>
18: <script type="text/javascript" src="angular.min.js"></script>
19: <script type="text/javascript">
20: function deathrayMenuController($scope){
21: $scope.stun=function(){
22: $scope.isDisabled="true";
23: } 24: }25: </script>
26: </body>
27: </html>
虽然这种方式具有很大灵活性，但也有一些不利的地方，在构造CSS类名时存在一定程度的间接性。当需要同时在模板和Javascript中使用时，
他很快就会变得无法维护，今儿无法正确地创建CSS。所以Angular提供了ng-class和ng-style指令。这两个指令都可以接受一个表达书，表
达式的结果可能是如下取值之一：
1.表示CSS类名的字符串，以空格分隔。
2.CSS类名数组。
3.CSS类名到布尔值的映射。
下面是个例子：
1: <!DOCTYPE html>
2: <html ng-app>
3: <head lang="en">
4: <meta charset="UTF-8">
5: <title></title>
6: <style>
7: .error{ 8: background-color: red; 9: } 10: .warning{ 11: background-color: yellow; 12: }13: </style>
14: </head>
15: <body>
16: <div ng-controller="HeaderController">
17: <div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div>
18: <button ng-click="showError()">Error</button>
19: <button ng-click="showWarning()">Warning</button>
20: </div>
21: <script type="text/javascript" src="angular.min.js"></script>
22: <script type="text/javascript">
23: function HeaderController($scope){
24: $scope.isError=false;
25: $scope.isWarning=false;
26: $scope.showError=function(){
27: $scope.messageText="This is an warning!"
28: $scope.isError=true;
29: $scope.isWarning=false;
30: };31: $scope.showWarning=function(){
32: $scope.messageText="This is an error!";
33: $scope.isError=false;
34: $scope.isWarning=true;
35: } 36: }37: </script>
38: </body>
39: </html>
src和href属性
当在<img>或者<a>标签上进行数据绑定时，在src或者href属性上简单使用{{}}无法很好滴运行。由于浏览器会优先加载图片和其他内容，
所以Angular没有机会会拦截到数据绑定请求。我们应该使用ng-src和ng-href指令来相应的代替
区分UI和控制器的指责
控制器的职责：
1.为应用中的模型设置初始状态。
2.通过$scope对象把数据模型和函数暴露给UI。
3.监视模板其余部分的变化，并采取相应操作。
为了让控制器保持小巧和可管理状态，我们可以视图中的每一块功能区域创建一个控制器。控制器是绑定在特定的DOM片段上的，这些片段
就是要他们负责管理的内容。
利用$scope暴露模型数据
利用向控制器传递$scope对象机制，可以把模型数据暴露给视图。在应用中可能还有其他数据，但只有通过$scope触及这些数据，Angular
才会把它当作数据模型的一部分。我们可以把$scope当作一个上下文环境，他让数据的变化变得可以观察。
我们可以间接地通过模板自身创建数据模型：
1通过表达式
<button ng-click=”count=3”></button>
2在表单项上使用ng-model,唯一不同就是ng-model会在表单项和制定模型之间建立双向绑定关系。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
