angularjs - 智能表 Angularjs 外部搜索框

Question

早上好，我的 angualrJS spa 上有一个智能表格，但出于 UI 设计目的，我需要将搜索字段放在表格之外。能做到吗？这是我的表的示例代码

<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">        
  <thead>
    <tr>
      <th>Tipo</th>
      <th>Da</th>
      <th>A</th>
      <th>Data</th>
      <th>Durata</th>
      <th>Costo</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th><input st-search="'destination'" /></th>
      <th><input st-search="'answerTime'" /></th>
      <th><input st-search="'duration'" /></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in displayedCollection">
      <td></td>
      <td></td>
      <td>{{row.destination}}</td>
      <td>{{row.answerTime | date : 'short'}}</td>
      <td>{{row.duration | number}}</td>
      <td>{{row.cost | currency : '€'}}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" class="text-center">
        <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
      </td>
    </tr>
  </tfoot>
</table>

我需要将 st-search 字段(或类似的字段)放在标签之外。

这里是示例，顶部是默认的，底部是所需的

/image/eRvwM.jpg

Answer 1

您可以尝试将表格包装在如下包装器中:

<div st-table="displayedCollection" st-safe-src="rowCollection">

   <input st-search="'destination'" />
   <input st-search="'answerTime'" />
   <input st-search="'duration'" />

   <table class="table table-striped">
      <thead>
         <tr>
            <th>Tipo</th>
            <th>Da</th>
            <th>A</th>
            <th>Data</th>
            <th>Durata</th>
            <th>Costo</th>
         </tr>
      </thead>
      <tbody>
         <tr ng-repeat="row in displayedCollection">
            <td></td>
            <td></td>
            <td>{{row.destination}}</td>
            <td>{{row.answerTime | date : 'short'}}</td>
            <td>{{row.duration | number}}</td>
            <td>{{row.cost | currency : '€'}}</td>
          </tr>
      </tbody> 
    </table>
 </div>

对我来说，这很完美。