最近重構公司的一個列表項目，從以前的純展示與modal更改，要加入直接編輯的功能种冬，最后選擇了ng-table。選擇的原因：
- 首先它與ui-grid舔糖，更加小巧娱两，輕量級完全滿足一般要求。
- 通過很少的配置金吗，能形成一個展示頁面十兢。
我根據(jù)官網(wǎng)的例子，會寫幾篇文章來介紹一下摇庙，下面先來看源碼
<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是需要注入的服務。其中需要實例化這個服務夕凝，并且傳入需要展示的數(shù)據(jù)simpleList宝穗。
overView.PNG
