AngularJS学习笔记四

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会在表单项和制定模型之间建立双向绑定关系。
相关阅读:
eclipse如何设置多个字符的智能提示
 19.面向对象的三大特征之封装
 18代码块
 成员变量和局部变量的区别
 类与对象
 Python压缩脚本编辑
 字符串内容
 参考
 序列
 元组
原文地址：https://www.cnblogs.com/zsplove/p/3655368.html