javascript – 使用NgTable参数通过AJAX加载JSON

我试图使用ngTables来排序和使用 AJAX调用过滤数据.目前,我可以使用ng重复来复制数据,但是我的排序功能都不适用.我引用了这个例子 http://plnkr.co/edit/zuzcma?p=info,并且可以使用mock.js文件来使其工作,但是现在我正在使用一个我加载到我的网络服务器上的文件,我似乎无法让它工作.

我确定答案是相当简单的,欣赏任何帮助.我附上了我的标记来告诉你我的控制器和html文件的样子.感谢大家,如果您需要更多信息,请通知我们！

以下是我参考的API的一些链接.

http://bazalt-cms.com/ng-table/

http://bazalt-cms.com/ng-table/example/6

HTML：

<div ng-controller="myController">
  <table ng-table="tableParams" show-filter="true" class="table table-condensed">
    <tr ng-repeat="user in data">
      <td data-title="foo" sortable="foo">{{user.foo}}</td>
      <td data-title="bar" sortable="bar">{{user.bar}}</td>
    </tr>
  </table>
</div>

控制器：

var app = angular.module('app',['ngTable']);

app.controller('myController',function($scope,$http,$filter,ngTableParams) {

 $http.get('http://jsondata.com/myjson.json')
  .success(function(data,status) {
    $scope.data = data;
  });

$scope.tableParams = new ngTableParams({
    page: 1,// show first page
    count: 10,// count per page
    sorting: {
        foo: 'asc'     // initial sorting
    }
},{
    total: data.length,// length of data
    getData: function($defer,params) {
        // use build-in angular filter
        var orderedData = params.sorting() ?
                            $filter('orderBy')(data,params.orderBy()) :
                            data;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()));
    }
  });
});

解决方法

你的问题是你在ngTableParams中使用局部变量数据,同时你不在成功函数的范围之内.

改变你的代码如下：

var app = angular.module('app',status) {
    $scope.data = data;

    $scope.tableParams = new ngTableParams({
        page: 1,// show first page
        count: 10,// count per page
        sorting: {
            foo: 'asc'     // initial sorting
        }
    },{
        total: $scope.data.length,// length of data
        getData: function($defer,params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                                $filter('orderBy')($scope.data,params.orderBy()) :
                                $scope.data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()));
        }
      });
  });


});

请参阅ngTableParams中的数据更改为$scope.data.

提示：如果您只是将ngTableParams放在您的成功功能中,那么也可以将数据更改为$scope.data.但是,如果要重新加载()您的表,更改变量将为您提供更好的灵活性.

原文地址：https://www.jb51.cc/ajax/153253.html