Question

我尝试使用服务器数据初始化ng表。但它并没有在表格中加载数据。

但是我能够在控制台中看到ajax调用成功。在ajax调用之后，我看到没有数据的多个表行行。

任何想法我做错了什么？

<script>
 var tableAp = angular.module('tableApp', ["ngTable"]);
 tableAp.controller('testTable', function($scope, $http, NgTableParams) {    
    $scope.tableParams = new NgTableParams({}, {
        getData: function(params) {
            $http.get('http://localhost/data.php')
                .success(function(data) {
                    console.log(data);
                    params.total(data.inlineCount);
                    return data;
                    //console.log(data);

                });
        }
    });
});
</script>

HTML

<body ng-app="tableApp">
<div ng-controller="testTable">
<table ng-table="tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td>
            {{user.name}}</td>
        <td>
            {{user.age}}</td>
    </tr>

</div>
</body>

Answer 1

您在html中使用ng-repeat="user in $data">，但我找不到您在控制器中定义$data的位置。

此外，您似乎尝试在控制器中注入名为NgTableParams的自定义服务。您不需要“创建对象”。这是一个singelton。

Answer 2

您可以尝试：DEMO LINK HERE

请使用 ngTableParams 代替 NgTableParams 。并更新您的脚本

<script>
 var tableAp = angular.module('tableApp', ["ngTable"]);
 tableAp.controller('testTable', function($scope, $http, ngTableParams) {  
      $scope.tableParams = new ngTableParams(
          { page: 1,            // show first page
            count: 10           // count per page
          },
          {
                getData: function($defer,params) { // --- add $defer
                    $http.get('http://localhost/data.php')
                        .success(function(data) {
                            console.log(data);
                            params.total(data.inlineCount);
                            $defer.resolve(data); // ---- add this

                        });
                }
            });
});
</script>

还可以通过添加结束表标记

来更新html

<body ng-app="tableApp">
<div ng-controller="testTable">
<table ng-table="tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td>
            {{user.name}}</td>
        <td>
            {{user.age}}</td>
    </tr>
</table>
</div>
</body>

ng表与服务器数据

2 个答案: