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

时间:2016-01-15 12:26:50

标签: javascript angularjs smart-table

我正在尝试将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>

1 个答案:

答案 0 :(得分:1)

您在表格的顶部使用了无效的变量名称,但在ng-repeat

中使用了正确的变量名称

变化:

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

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