无法使用 Angular Smart-Table 进行排序/过滤/搜索

Question

我正在尝试将 st-safe-src 与带有 ajax 数据的 Smart-Table 一起使用，但显然我做错了什么。我的数据显示在表格中，但搜索、排序和筛选不起作用。出于某种原因，Plunker 今天没有为我加载，这很不幸，因为那里有几个示例。

我的代码低于任何建议。

TransferController.js

angular
  .module("RssTransfers")
  .controller("TransferController", ["$http", "$filter", function($http, $filter) {

    var self = this;
    self.all = [];

    function getTransfers() {
      $http
        .get("http://localhost:3000/transfers/api")
        .then(function(response) {
          self.all = response.data.transfers;
          self.collection = [].concat(self.all);
          console.log(self.collection)
          console.log(self.all)
      })
    }
    getTransfers();
}]);

table.html

<div class="container">
  <div ng-controller="TransferController as transfers">

    <table st-table="collection" st-safe-src="transfers" class="table striped highlight">
      <thead>
        <tr>
          <th class="table-head" id="period-col" st-sort="period">Period</th>
          <th class="table-head" st-sort="uploadDate">Upload Date</th>
          <th class="table-head" st-sort="uploadDate">Transfer Code</th>
          <th class="table-head" st-sort="vendor">Vendor</th>
          <th class="table-head" colspan="2" st-sort="description">Description</th>
          <th class="table-head" st-sort="amount">Amount (SSP)</th>
        </tr>
        <tr>
        <tr>
          <th colspan="4">
            <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
          </th>
        </tr>
          <th>
            <input st-search="period" colspan=".75" placeholder="search by period" class="input-sm form-control" type="search"/>
          </th>
          <th>
            <input st-search="uploadDate" placeholder="search by upload date" class="input-sm form-control" type="search"/>
          </th> 
          <th>
            <input st-search="transferCode" placeholder="search by transfer code" class="input-sm form-control" type="search"/>
          </th>
          <th>
            <input st-search="vendor" placeholder="search by vendor" class="input-sm form-control" type="search"/>
          </th>
          <th colspan="2">
            <input st-search="description" placeholder="search by description" class="input-sm form-control" type="search"/>
          </th>
          <th>
            <input st-search="amount" placeholder="search by amount" class="input-sm form-control" type="search"/>
          </th>
        </tr>
      </thead>
      <tbody id="table-cell">
        <tr ng-repeat="data in transfers.all">
          <td class="table-cell" colspan=".75">{{ data.period }}</td>
          <td class="table-cell">{{ data.uploadDate | date }}</td>
          <td class="table-cell">{{ data.transferCode }}</td>
          <td class="table-cell">{{ data.vendor }}</td>
          <td class="table-cell" colspan="2">{{ data.description }}</td>
          <td class="table-cell">{{ data.amount }}</td>
        </tr>
      </tbody>

    </table>
  </div>
</div>

Answer 1

您在表格顶部使用了无效的变量名，但在 ng-repeat 中使用了正确的变量名

变化：

<table st-table="collection" st-safe-src="transfers"> 

到

<table st-table="transfers.collection" st-safe-src="transfers.all" >