我有ng-table的页面,可以很好地处理初始数据。我有一个选择框,该框根据选择的选项发送服务器请求,然后Iam将新数据获取为angular,但未使用ng- table更新。
这是我的看法:
<section data-ng-controller="ReportsController"> <div class="plain-box"> <table ng-table="tableParams" show-filter="true" class="table table-striped"> <thead> <tr> <th ng-repeat="column in columns" ng-show="column.visible" class="text-center sortable" ng-class="{ 'sort-asc': tableParams.isSortBy(column.field, 'asc'), 'sort-desc': tableParams.isSortBy(column.field, 'desc') }" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')"> {{column.title}} </th> </tr> </thead> <tbody> <tr ng-repeat="user in $data"> <td ng-repeat="column in columns" sortable="column.field"> {{user[column.field]}} </td> </tr> </tbody> </table> </div>
我的控制器:
angular.module('reports').controller('ReportsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Reports', '$filter', 'ngTableParams', function($scope, $stateParams, $location, Authentication, Reports, $filter, ngTableParams ) { $scope.reportBillingPeriod = 0; $scope.$watch('reportBillingPeriod', function(newValue, oldValue) { $scope.findReportData( newValue ); }); //$scope.reportBillingData = 0; $scope.findReportData = function( selectedMonth ){ var selectedPeriod = selectedMonth; if( selectedPeriod === null ) selectedPeriod = '0'; $scope.customers_report = Reports.customer_report({ monthReport: selectedPeriod }, function( result ){ var data = result.customers; $scope.columns = [ { title: 'Account Name', field: 'accountName', visible: true, filter: { 'name': 'text' } }, { title: 'Gross Revenue', field: 'planTotalAmount', visible: true } ]; $scope.$watch('result', function () { $scope.tableParams.settings().$scope = $scope; $scope.tableParams.reload(); }); $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10, // count per page filter: { name: 'O' // initial filter } }, { total: data.length, // length of data getData: function($defer, params) { var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); //$scope.reportBillingData = new Date(); } }); }); }; }]);
$scope.$watch(‘result’, function () { $scope.tableParams.settings().$scope = $scope; <<–nested scope is replacing!! $scope.tableParams.reload(); });
ngTable 指令会建立巢状范围,其中包含所有指令的设定才能运作,因此您不应该将它替换为ReportsController的范围,而 需要移除此列, $scope.tableParams.settings().$scope = $scope; 并且需要为 ngTable 指定所有参数,请在此处查看ngTables$scope.tableParams.reload()第三次导致TypeError:无法将属性’$data’设置为null-reload-for-the-third-time-results-in-t/26174211#26174211)
$scope.tableParams.settings().$scope = $scope;
UPDATE 以及最好将ngTableParams初始化和$watch用作findReportData函数之外的结果,以防止错误和不必要的重新初始化
UPDATE 2 我设置了plunk,尝试使其看起来更像原始问题,并模拟httpservice,但这不是重要的是,所有数据访问都必须在getDatafunc 里面,ngTableParams并且在设置所有需要调用的过滤器时(或者可能只是$watch像在plunk中那样使用),您必须调用$scope.tableParams.reload();,您可以尝试在上面的输入中键入一些数字,数据将会更新没问题。为清晰起见,删除了与排序,固定和过滤相关的所有代码,因此getData如下所示:
getData
ngTableParams
$watch
$scope.tableParams.reload();
getData: function($defer, params) { var selectedPeriod = $scope.reportBillingPeriod ; //selectedMonth; if( selectedPeriod === null ) selectedPeriod = '0'; $scope.customers_report = Reports.get({ //Reports.customer_report({ monthReport: selectedPeriod }, function(result ){ var data = result.customers; $scope.tableParams.total(data.length); var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); }); }
并查看过滤器更改,如下所示:
$scope.reportBillingPeriod = 0; $scope.$watch('reportBillingPeriod', function(newValue, oldValue) { $scope.tableParams.reload(); });
UPDATE 3 删除了调用getDatafunc的重复项,在此进行 了修改,将问题放在$watch了reportBillingPeriod变量中,因此,为了防止第二次上传数据,我们必须检查值的更改方式,例如此处
reportBillingPeriod
$scope.reportBillingPeriod = defaultValue; $scope.$watch('reportBillingPeriod', function(newValue, oldValue) { //this how we prevent second call if (newValue!=oldValue) $scope.tableParams.reload(); });