試圖排序智能表觸發一個新的AJAX調用

Question

我有一個Angular.js智能表，其中數據的來源是使用$資源的Ajax調用。我用st-pipe來指定ajax函數，而我正在使用st-safe-src。

在init上，智能表完成ajax請求並加載表。

到目前爲止好，但...

我有兩個問題...

1 - 不被初始加載應用我的默認排序列。

2 - 我發現每次嘗試通過單擊列標題來排序數據時，智能表都會觸發新的Ajax調用以再次檢索源數據。

我希望智能表能夠排序客戶端，因此不必做ajax調用。我相信這是st-safe-src的作用。我錯了嗎？

欣賞它有人可以給我一隻手。

感謝

這裏是我的控制器......

eposWebAngularStrutsApp.controller('StoreHealthCheckController', ['StoreServerHealth', function (StoreServerHealth) { 
    var ctrl = this; 
    this.rowCollection = []; // base collection 
    this.displayedCollection = []; // displayed collection 

    this.callServer = function callServer(tableState) { 
     ctrl.isLoading = true; 
     StoreServerHealth.query(function(result) {   
      ctrl.rowCollection = result; 
      ctrl.displayedCollection = [].concat(ctrl.rowCollection); 
      ctrl.isLoading = false; 
      }) 
      .error(function() { 
       ctrl.errorMsg = "An Error has occured while loading posts!"; 

     }); 
    }; 
}]); 

這裏是我的模板...

<div class="table-container" ng-controller="StoreHealthCheckController as mc"> 
<table st-table="mc.displayedCollection" st-safe-src="mc.rowCollection" st-pipe="mc.callServer" class="table table-striped ng-isolate-scope"> 
    <thead> 
    <tr> 
     <th st-sort-default="true" st-sort="locationId">Store</th> 
     <th>Server</th> 
     <th>Conn Status</th> 
     <th>Last Updated</th> 
     <th>MDI</th> 
     <th>Last Synched (MDI)</th> 
     <th>DSM</th> 
     <th>Last Synched (DSM)</th> 
     <th>Trading Status</th> 
     <th>Build</th> 
    </tr> 
    </thead> 
    <tbody ng-show="mc.isLoading"> 
    <tr> 
     <td colspan="10" class="text-center">Loading ... </td> 
    </tr> 
    </tbody>  
    <tbody ng-show="!mc.isLoading"> 
    <tr ng-repeat="row in mc.displayedCollection"> 
     <td>{{row.locationId}}</td> 
     <td>{{row.clientId | clientIdToStoreServerType}}</td> 
     <td> 
      <img ng-src="img/{{row.status | statusToTrafficLightImage}}.png" alt="{{row.status}}"/> 
     </td> 
     <td>{{row.lastUpdateTime | date:'dd-MM-yyyy hh:mm:ss'}}</td> 
     <td><img ng-src="img/{{row.replicationStatus | statusToTrafficLightImage}}.png" alt="{{row.replicationStatus}}"/></td> 
     <td>{{row.lastReplicationSyncTime | date:'dd-MM-yyyy hh:mm:ss'}}</td> 
     <td><img ng-src="img/{{row.dsmReplicationStatus | statusToTrafficLightImage}}.png" alt="{{row.dsmReplicationStatus}}"/></td> 
     <td>{{row.dsmLastSynchTime | date:'dd-MM-yyyy hh:mm:ss' }}</td> 
     <td>{{row.storeTradingStatus | tradingStatusCodeToTradingStatus}}</td> 
     <td>{{row.buildVersion}}</td> 
     <td> 
      <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary"> 
       <i class="fa fa-bolt"></i>    
      </button> 
      <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary"> 
       <i class="fa fa-desktop"></i> 
      </button> 
      <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary"> 
       <i class="fa fa-server"></i> 
      </button> 
      <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary"> 
       <i class="fa fa-info-circle"></i>    
      </button>         
     </td>   
    </tr> 
    </tbody> 
</table> 
</div> 

感謝

Answer 1

我採取了ST的解決了這個 - 從我的表格定義管道和更改我的控制器如下...

eposWebAngularStrutsApp.controller('StoreHealthCheckController', ['StoreServerHealth', function (StoreServerHealth) { 

    var ctrl = this; 
    ctrl.rows = []; 
    ctrl.displayedRows = []; 

    ctrl.isLoading = true; 
    StoreServerHealth.query(function(result) {   
     console.log(result); 
     ctrl.rows = result; 
     ctrl.displayedRows = [].concat(ctrl.rows); 
     ctrl.isLoading = false; 
    }); 


}]); 

所以結論我不知道ST管道是什麼。