尝试使用 angularjs 中的 smart-table 在 table 上设置排序

Question

将 angularjs 与 smart-table 结合使用。 Table headers 已绘制但没有数据行。没有 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 for Smart Table，为了使用 Smart Table，

The first thing is to add the module angular.module('myApp',['smart-table'] to your angular application. Then use the markup you would normally do for html tables. On the table element add the st-table attribute to tell smart-table which collection holds your displayed data, (ie the one you are going to use in the repeater). Now you will be able to compose the table using the plugins.

看来您缺少 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>

尝试使用 angularjs 中的 smart-table 在 table 上设置排序

Trying to setup sort on a table using smart-table in angularjs

angularjs

smart-table