基礎(chǔ)概念

ng-table提供了一個表頭來提供，基礎(chǔ)的過濾信息：

（1）指定一列的過濾器，然后模板就會使用。

（2）ngTable支持number, text, select 和 select-multiple的值模板。

（3）可以有選擇的為NgTableParams提供初始過濾值。

 <div class="row">
    <div class="col-md-6" ng-controller="demoController as demo">
      <h3>ngTable directive</h3>
      <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'}">{{row.name}}</td>
          <td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
          <td data-title="'Money'">{{row.money}}</td>
          <td data-title="'Country'" filter="{ country: 'select'}" filter-data="demo.countries">{{row.country}}</td>
        </tr>
      </table>
    </div>
    <div class="col-md-6" ng-controller="dynamicDemoController as demo">
      <h3>ngTableDynamic directive</h3>
      <table ng-table-dynamic="demo.tableParams with demo.cols" class="table table-condensed table-bordered table-striped">
        <tr ng-repeat="row in $data">
          <td ng-repeat="col in $columns">{{row[col.field]}}</td>
        </tr>
      </table>
    </div>
  </div>

(function() {
  "use strict";
  var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
  app.controller("demoController", demoController);
  demoController.$inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];
  //注入NgTableParams（ngtablemodule）和ngTableSimpleMediumList、ngTableDemoCountries兩個數(shù)據(jù)源
  function demoController(NgTableParams, simpleList, countries) {
    this.countries = countries;//初始化selcet的數(shù)據(jù)源
    this.tableParams = new NgTableParams({
      // initial filter
      filter: { name: "T" } //初始過濾條件
    }, {
      dataset: simpleList
    });
  }
  

  app.controller("dynamicDemoController", dynamicDemoController);
  
  dynamicDemoController.$inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];

  function dynamicDemoController(NgTableParams, simpleList, countries) {
    this.cols = [//自定義table條目，過濾條件、表頭名字和數(shù)據(jù)源,filterData: countries。
      { field: "name", title: "Name", filter: { name: "text" }, show: true },
      { field: "age", title: "Age", filter: { age: "number" }, show: true },
      { field: "money", title: "Money", show: true },
      { field: "country", title: "Country", filter: { country: "select" }, filterData: countries, show: true }
    ];
    
    this.tableParams = new NgTableParams({
      // initial filter
      filter: { country: "Ecuador" } //初始化數(shù)據(jù)源
    }, {
      dataset: simpleList
    });
  }
})();

(function() {
  "use strict";

  angular.module("myApp").run(setRunPhaseDefaults);
  setRunPhaseDefaults.$inject = ["ngTableDefaults"];
//通過config來設(shè)置表格數(shù)量
  function setRunPhaseDefaults(ngTableDefaults) {
    ngTableDefaults.params.count = 5;
    ngTableDefaults.settings.counts = [];
  }
})();

filtering.png