javascript - angular ng-table 官方的例子我做了一早上一晚上就是做不出来....

Question

1.ng-table的例子已经做的让我怀疑人生了....难道我是隐藏的智障?

不废话 直接上code：

先是controller里面注入NgTableParams
然后html：

<p ng-controller="editStoreItemController" class="pageback">
    <table ng-table="editStoreItemController.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>
</p>

然后js：

app.controller("editStoreItemController", editStoreItemController);
  editStoreItemController.$inject = ["NgTableParams"];

  function editStoreItemController(NgTableParams) {
    var simpleList=[{ name: 'christian', age: 21 }, { name: 'anthony', age: 88 }];
    var self = this;
    self.tableParams = new NgTableParams({}, {
      dataset: simpleList
    });
  }

结果：在浏览器中，只显示

这个东西，其他数据都没有，都要挠破头了；

Answer 1

找到原因了~~ 看看区别在哪里，对于新手来说坑的很

<p ng-controller="editStoreItemController as vm" class="pageback">
    <table ng-table="vm.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>
</p>

  app.controller("editStoreItemController", editStoreItemController);
  editStoreItemController.$inject = ["NgTableParams"];

  function editStoreItemController(NgTableParams) {
    var simpleList=[{ name: 'christian', age: 21 }, { name: 'anthony', age: 88 }];
    var vm= this;
    vm.tableParams = new NgTableParams({}, {
      dataset: simpleList
    });
  }

Answer 2

显然页面没有问题 但你定义的值没有获取到

你在这个控制器定义了 var self = this

建议你用 ng-table="self.tableParams"

---

<p ng-controller="editStoreItemController" class="pageback">
    <table ng-table="vm.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>
</p>

  app.controller("editStoreItemController", editStoreItemController);
  editStoreItemController.$inject = ["NgTableParams"];

  function editStoreItemController(NgTableParams) {
    var simpleList=[{ name: 'christian', age: 21 }, { name: 'anthony', age: 88 }];
    var vm= this;
    vm.tableParams = new NgTableParams({}, {
      dataset: simpleList
    });
  }
  

Answer 3

<p>
<table ng-table="self.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>
</p>

app.controller("demoController", demoController);
  demoController.$inject = ["NgTableParams"];
  function demoController(NgTableParams) {
        console.log("running 1");
    var self = this;
        var simpleList=[{ name: 'christian', age: 21 }, { name: 'anthony', age: 88 }];
    self.tableParams = new NgTableParams({}, {
      dataset: simpleList
    });
  }

控制台 只有log的 running 1