将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>
答案 0 :(得分:2)
根据智能表的documentation,为了使用智能表,
第一件事是将模块
angular.module('myApp',['smart-table']
添加到角度应用程序中。然后使用通常用于html表的标记。在table元素上添加st-table
属性以告诉smart-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>