尝试使用angularjs

时间:2015-10-20 23:34:54

标签: angularjs smart-table

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

1 个答案:

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