嘗試使用angularjs中的智能表設置在桌子上排序

Question

使用angularjs和smart-table。表頭被繪製但沒有數據行。沒有smart-table數據顯示正常。有任何想法嗎？

錯誤控制檯..

"Error: [$compile:ctreq] http://errors.angularjs.org/1.4.7/$compile/ctreq?p0=stTable&p1=stSort 

數據集..

[{ 
    "name": "Robert B", 
     "associatedNumber": 21, 
     "standing": true 
}, { 
    "name": "Martin C", 
     "associatedNumber": 55, 
     "standing": true 
}, { 
    "name": "Bobby B", 
     "associatedNumber": 15, 
     "standing": true 
}] 

json由API返回，/players ..

var app = angular.module('lmsHome', ['smart-table']); 
app.controller('lmsHomeCtrl', function ($scope, $http) { 
    $http.get("/players").success(function (response) { 
     $scope.players = response; 
    }); 
}); 

HTML ..

<div ng-app="lmsHome" ng-controller="lmsHomeCtrl"> 
    <table class="table table-hover"> 
     <thead> 
      <tr> 
       <th st-sort="name">Player</th> 
       <th st-sort="associatedNumber">Number</th> 
       <th st-sort="standing">Still standing?</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="player in players" ng-class="{'success': player.standing}"> 
       <td ng-cloak> 
        <span ng-show="player.standing"> 
         {{player.name}} 
        </span> 
        <span ng-show="!player.standing"> 
         <strike>{{player.name}}</strike> 
        </span> 
       </td> 
       <td ng-cloak>{{player.associatedNumber}}</td> 
       <td ng-cloak> 
        <span class="label">{{player.standing}}</span> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="/jquery/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
<!-- Angularjs --> 
<script src="/angular/angular.min.js"></script> 
<!-- A table/grid for Angularjs --> 
<script src="/table/smart-table.min.js"></script> 
<!-- Custom logic --> 
<script src="/js/homeLogic.js"></script> 

Answer 1

按照documentation智能表，以便使用智能表，

的第一件事就是到模塊angular.module('myApp',['smart-table']添加到您的角度應用。然後使用你通常爲html表格做的標記。在表格元素上添加st-table屬性，告訴智能表哪個集合包含您的顯示的數據（即您要在中繼器中使用的數據）。現在您可以使用插件編寫表格了。

所以它看起來像你缺少st-table屬性。按照錯誤，提供的鏈接

<table class="table table-hover" st-table="players"> 
 
    <thead> 
 
    <tr> 
 
     <th st-sort="name">Player</th> 
 
     <th st-sort="associatedNumber">Number</th> 
 
     <th st-sort="standing">Still standing?</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr ng-repeat="player in players" ng-class="{'success': player.standing}"> 
 
     ... 
 
    </tr> 
 
    </tbody> 
 
</table>