AngularJS 表格

AngularJS是一种功能强大的框架，它可以在Web应用程序中使用数据绑定来减少代码量和复杂度，使得您可以更方便地构建可扩展的Web应用程序。其中，AngularJS 表格是其中一个常用而又实用的功能。

ngRepeat 指令

每个AngularJS表格都可以使用ngRepeat指令来创建。ngRepeat指令通过循环遍历控制器中的数组，创建新行来显示数据。这个指令需要两个重要的参数：一个是实际值数组、另一个是重复的HTML代码。例如，下面是一个基本的表格。

<table>
   <tr ng-repeat="person in people">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
      <td>{{person.address}}</td>
   </tr>
</table>

在这个例子中， ng-repeat="person in people"定义了一个人类数组，并将其分配给变量person，然后将人类数组里面的每一个值都显示在表格的一行中。

Filter 过滤器

Filter过滤器是AngularJS表格的另一个有用的特性。它使用户可以按照特定的要求过滤和排序数据（例如：按姓名、按年龄、按地址等），使数据更加易于查找和管理。

例如，将以下语句加入代码中就能按‘name’分类：

<tr ng-repeat="person in people | orderBy:'name'">

我们甚至可以添加逆序：

<tr ng-repeat="person in people | orderBy:'-name'">

Filter可以快速处理数据，但在处理大量数据时常常会影响性能。

Controller 控制器

在AngularJS表格中，定义了一个控制器，用来将模型数据和视图粘合在一起。例如，上面的人员列表可以通过创建一个人员控制器并将其绑定到HTML片段中来实现。

<div ng-controller="personCtrl">
   <table>
      <tr ng-repeat="person in people">
         <td>{{person.name}}</td>
         <td>{{person.age}}</td>
         <td>{{person.address}}</td>
      </tr>
   </table>
</div>

然后，我们需要实现personCtrl控制器。

angular.module('app', [])
   .controller('personCtrl', function($scope) {
      $scope.people = [
         {name:'John', age:25, address:'New York City'},
         {name:'Peter', age:32, address:'San Francisco'},
         {name:'Lucy', age:21, address:'Los Angeles'},
      ];
   });

在这里，我们首先通过module函数建立了一个名为“app”的模块，然后使用controller函数创建了一个名为“personCtrl”的控制器，并将人员列表数组绑定到$scope中的某个属性中。

总结

AngularJS表格提供了一种基于模板的数据绑定方法，为Web应用程序提供了更多的功能和灵活性。使用ngRepeat指令将数据绑定到表格中，使用Filter过滤器按需过滤和排序数据，并通过控制器将模型和视图粘合在一起。