ng-table插件（一）

最近重构公司的一个列表项目，从以前的纯展示与modal更改，要加入直接编辑的功能，最后选择了ng-table。选择的原因：

• 首先它与ui-grid，更加小巧，轻量级完全满足一般要求。
• 通过很少的配置，能形成一个展示页面。

我根据官网的例子，会写几篇文章来介绍一下，下面先来看源码

<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
      <tr ng-repeat="row in $data">
        <td data-title="'Name'" filter="{name: 'text'}" sortable="'name'">{{row.name}}</td>
        <td data-title="'Age'" filter="{age: 'number'}" sortable="'age'">{{row.age}}</td>
        <td data-title="'Money'" filter="{money: 'number'}" sortable="'money'">{{row.money}}</td>
      </tr>
</table>

上面ng-table是table指令，data-title是每一个条目的指令。 filter属性可以传递过滤条件。

(function() {
  var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
  app.controller("demoController", demoController);
  demoController.$inject = ["NgTableParams", "ngTableSimpleList"];
  function demoController(NgTableParams, simpleList) {
    var self = this;
    self.tableParams = new NgTableParams({}, {
      dataset: simpleList
    });
  }
})();

其中NgTableParams、simpleList是需要注入的服务。其中需要实例化这个服务，并且传入需要展示的数据simpleList。

overView.PNG