智能表Angularjs外部搜索框

时间:2015-03-24 13:37:08

标签: angularjs smart-table

早上好,我的angualrJS水疗中心有一张智能桌子,但我需要将搜索区域放在桌子外面以供设计之用。可以吗?这是我表格的示例代码

<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字段(或类似的东西)放在标签之外。

这里是样本,在默认情况下,在底部所需

http://imgur.com/C24pk0K

1 个答案:

答案 0 :(得分:0)

您可以尝试将表格包装在这样的包装中:

<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>

对我来说,这很完美。