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会在表单项和制定模型之间建立双向绑定关系。

AngularJS学习笔记四,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。