javascript - ngTable 仅显示第一列

Question

我正在尝试使用 ngTableParams 更新我的 ngTable，但只显示第一列。

js代码:

var dataset = [
  {name: "Hello50", bunny:"Bunny1", age: 50},
  {name: "Hello49", bunny:"Bunny2", age: 49},
  {name: "Hello48", bunny:"Bunny3", age: 48},
  {name: "Hello47", bunny:"Bunny4", age: 47},
  {name: "Hello46", bunny:"Bunny5", age: 46},
];

/** @export */
this.tableParams = new ngTableParams({count: 10}, { data: dataset});

和 html:

>   <table ng-table="ctrl.tableParams" class="table" show-filter="true">
>     <tr ng-repeat="user in $data">
>       <td data-title="'Name'" > {{user.name}} </td>
>       <td data-title="'Bunny'" > {{user.bunny}} </td>
>     </tr>   </table>

它仅显示第一(名称)列。

如果我打印出来

<h1>{{ctrl.tableParams}}<br></h1>

然后显示:

{"data":[{"name":"Hello50","va":"Bunny1","ua":50},{"name":"Hello49","va":"Bunny2","ua":49},{"name":"Hello48","va":"Bunny3","ua":48},{"name":"Hello47","va":"Bunny4","ua":47},{"name":"Hello46","va":"Bunny5","ua":46}]}

为什么是“va”和“ua”？我预计那里会有“兔子”和“年龄”。

请帮忙。谢谢!

Answer 1

根据docs ，我看到的唯一错误是:

this.tableParams = new ngTableParams({count: 10}, { 数据: 数据集});

您应该使用数据集。

请参阅以下代码片段。

    angular.module("sample", ["ngTable"])
      .controller("myController", myController);

		var dataset = [
      {name: "Hello50", bunny:"Bunny1", age: 50},
      {name: "Hello49", bunny:"Bunny2", age: 49},
      {name: "Hello48", bunny:"Bunny3", age: 48},
      {name: "Hello47", bunny:"Bunny4", age: 47},
      {name: "Hello46", bunny:"Bunny5", age: 46},
    ];

    myController.$inject = ["NgTableParams"];

    function myController(NgTableParams) {

      this.tableParams = new NgTableParams({}, {
        dataset : dataset
      });
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/ng-table@3.0.1/bundles/ng-table.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="sample" class="container-fluid">
  <div class="row">
    <div class="col-md-3" ng-controller="myController as demo">
      <h3>ngTable</h3>
      <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
        <tr ng-repeat="user in $data">
          <td data-title="'Name'" filter-data="demo.nameFilter">{{user.name}}
          </td>
          <td data-title="'Bunny'" filter-data="demo.descriptionFilter">{{user.bunny}}
          </td>
          <td data-title="'Age'" filter-data="demo.descriptionFilter">{{user.age}}
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>