AngularJS ng-table插件第二講，下面這個(gè)官網(wǎng)例子會(huì)根據(jù)ng-option來調(diào)用map來改變內(nèi)部數(shù)據(jù)焕刮，然后整個(gè)ng-table也會(huì)改變禽拔。
下面是源碼蚕甥，我會(huì)根據(jù)源碼來講解

<div ng-app="myApp">
  <div ng-controller="demoController as demo">
    <h2 class="page-header">Lazy loading managed array</h2>
    <div class="bs-callout bs-callout-info">
      <h4>Overview</h4>
      <p>You are not limited to having the data array to hand at the time when <code>NgTableParams</code> is created. So for example you could load the data using <code>$http</code> and then hand this to <code>NgTableParams</code></p>
    </div>
    <div class="form-inline" style="margin-bottom: 20px">
      <div class="form-group">
        <label for="datasets">Select dataset</label>
        <select id="datasets" class="form-control" ng-model="demo.dataset" ng-options="dataset for ds in demo.datasets"
                ng-change="demo.changeDs()"></select>
      </div>
    </div>
    <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>
  </div>
</div>

• 使用<code>controller as demo</code>來把<code>controller</code>內(nèi)的對象綁定在<code>controller </code>的實(shí)例對象上佃蚜∫ㄎ洌可以跨越<code>scope</code>調(diào)用邻辉，進(jìn)行雙向綁定轿衔。
• 當(dāng)<code>ng-option</code>發(fā)生變化的時(shí)候微驶，會(huì)觸發(fā)<code>ng-change</code>浪谴，<code>ng-change</code>會(huì)把值傳進(jìn)到<code>changeDs()</code>中。
• <code>$data</code>是ng-table內(nèi)部數(shù)據(jù)源因苹，<code>row in $data</code> ng-table會(huì)遍歷展示數(shù)據(jù)源苟耻。
• <code>filter="{name: 'text'}" </code> filter屬性會(huì)規(guī)定過濾條件。

(function() {
  "use strict";
  var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);
  app.controller("demoController", demoController);
  demoController.$inject = ["NgTableParams", "ngTableSimpleList"];
  function demoController(NgTableParams, simpleList) {
    var self = this;
    self.changeDs = changeDs;//因?yàn)橐呀?jīng)用controller as demo扶檐，相當(dāng)于實(shí)例化controller凶杖，直接通過this可以調(diào)用
    self.datasets = ["1", "2"];//ng-options的值
    self.dataset1 = simpleList;//simpleList相當(dāng)于ngTableSimpleList注入的數(shù)據(jù)源。與createDs2想對應(yīng)（當(dāng)ng-option為1的時(shí)候）款筑。
    self.dataset2 = createDs2();//與createDs2想對應(yīng)智蝠，與ng-option=2對應(yīng)與。
    self.tableParams = new NgTableParams();//實(shí)例化table插件
    function changeDs() {//當(dāng)ng-change時(shí)候調(diào)用
      self.tableParams.settings({
        dataset: self["dataset" + self.dataset]奈梳；//確定調(diào)用dataset1還是dataset2
      });
    }
    function createDs2() {//這里就是通過map改變數(shù)據(jù)
      return simpleList.map(function(item) {
        return angular.extend({}, item, {
          age: item.age + 100
        });
      });
    }
  }
})();
(function() {
  "use strict";
  angular.module("myApp").run(configureDefaults);
  configureDefaults.$inject = ["ngTableDefaults"];
  function configureDefaults(ngTableDefaults) {//這里可以看出源碼是根據(jù)provider實(shí)現(xiàn)的
      ngTableDefaults.params.count = 5;
      ngTableDefaults.settings.counts = [];
  }
})();