当在条目对上使用中继器时，如何在Angular Smart-Table中应用筛选或排序规则

Question

我有一个存储在FireBase中的数据结构，如下所示：

{ 'assets' : {
    'key1' : {
        'name':'application1',
        'deployed':'dev'
    },
    'key2' : {
        'name':'application2',
        'deployed':'prod'
    }

} }

我已经拉入了angular智能表，并具有以下表结构：

<table st-table='assets'>
  <thead>
    <th>Name</th>
    <th>Deployed</th>
  </thead>
  <tbody>
    <tr ng-repeat="(assetId, asset) in assets)">
        <td>{{asset.name}}</td>
        <td>{{asset.deployed}}</td>
    </tr>
  </tbody>
</table>

这一切似乎都很好用，但是如果我尝试使用

<th st-sort='name'>

或者如果我尝试使用以下命令添加搜索/过滤

<th><input st-search='name' type='search'/></th>

没有发生任何事情，我没有看到javascript失败或其他任何事情。

我怀疑这与中继器使用键/值对而不是普通对象有关。我试过使用'asset.name‘，但我得到了相同的结果，没有输出或错误，我不确定下一步该怎么做。

想法/想法？

谢谢

Answer 1

使用orderBy和filter可以得到您想要的结果

在控制器中，放置以下内容：

  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFilter = '';     // set the default search/filter term

然后，在您的HTML中：

<input type="text" placeholder="Search" ng-model="searchFilter">

<table st-table='assets'>
  <thead>
    <th>
      <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
        Name
        <span ng-show="sortType == 'name' && !sortReverse" class="caret-down"></span>
        <span ng-show="sortType == 'name' && sortReverse" class="caret-up"></span>
      </a>
    </th>
    <th>
      <a href="#" ng-click="sortType = 'deployed'; sortReverse = !sortReverse">
        Deployed
        <span ng-show="sortType == 'deployed' && !sortReverse" class="caret-down"></span>
        <span ng-show="sortType == 'deployed' && sortReverse" class="caret-up">
      </a>
    </th>
  </thead>
  <tbody>
    <tr ng-repeat="(assetId, asset) in assets | orderBy:sortType:sortReverse | filter:searchFilter">
      <td>{{asset.name}}</td>
      <td>{{asset.deployed}}</td>
    </tr>
  </tbody>
</table>

这里可能有一些小错误，因为我现在不在办公室，正在打电话。这应该会让你非常接近你正在寻找的东西。