重装请求时NG-表未呈现新数据 [英] ng-Table not rendering new data when reloading request
问题描述
我有NG-表，正常工作与初始数据页。我有选择的基础上，选择服务器请求，然后荫获得新数据，但角度不更新与NG-表发送一个选择框。
下面是我的看法：
＆lt;节数据-NG-控制器=ReportsController＆GT;
＆LT; DIV CLASS =纯盒子＆GT;
＆LT;表NG表=tableParams显示过滤器=真正的类=表的表条纹＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
百分位NG重复=列列NG秀=column.visible
类=TEXT-中心排序NG-CLASS ={
排序ASC'：tableParams.isSortBy（column.field，ASC），
排序倒序：tableParams.isSortBy（column.field，降序）
}
NG-点击=tableParams.sorting（column.field，tableParams.isSortBy（column.field，ASC）说明：ASC）＆GT;
{{column.title}}
＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复=用户$ DATA＆GT;
＆LT; TD NG重复=列列排序=column.field＆GT;
{{用户[column.field]}}
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
我的控制器：
angular.module（报告）。控制器（'ReportsController'，['$范围，$ stateParams'，'$的位置，验证，报告 ，'$过滤器'，'ngTableParams'，
功能（$范围，$ stateParams，$位置，认证，报告，$过滤器，ngTableParams）{
$ scope.reportBillingPeriod = 0;
$范围。$腕表（'reportBillingPeriod'，功能（为newValue，属性oldValue）{
$ scope.findReportData（为newValue）;
}）;
//$scope.reportBillingData = 0;
$ scope.findReportData =功能（selectedMonth）{
VAR selectedPeriod = selectedMonth;
如果（selectedPeriod ===空）
selectedPeriod ='0';
$ scope.customers_report = Reports.customer_report（{
monthReport：selectedPeriod
}，功能（结果）{
VAR数据= result.customers;
$ scope.columns = [
{标题：帐户名，现场：帐户名，可见：真，过滤器：{'名'：'文本'}}，
{标题：毛收入，场：'planTotalAmount'，可见：真正}
]; $范围。$腕表（'结果'，函数（）{
$ scope.tableParams.settings（）$范围= $范围。
$ scope.tableParams.reload（）;
}）; $ scope.tableParams =新ngTableParams（{
页面：1，//显示第一页
数：10，//每页计
过滤：{
名称：'O'//初始过滤
}
}，{
总：data.length，//数据的长度
的getData：函数（$延迟，则params）{
VAR orderedData = params.sorting（）？ $过滤器（'排序依据'）（数据，params.orderBy（））：数据;
$ defer.resolve（orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（）））;
//$scope.reportBillingData =新的日期（）;
}
}）;
}）;
};
}]）;
$范围。$腕表（'结果'，函数（）{
$ scope.tableParams.settings（）$范围= $范围。 ＆LT;＆LT; - 嵌套范围更换！
$ scope.tableParams.reload（）;
}）;
ngTable 指令创建嵌套范围由inculde为指导工作的所有设置，让你shoudn't与ReportsController结果的范围更换
您需要删除此行 $ scope.tableParams.settings（）$范围= $范围;
结果
而你需要指定 ngTable ，请看看所有的参数
这里的In ngTables，运行$ scope.tableParams.reload（）在类型错误的第三次结果：无法设置属性为null
更新
而且，最好采取ngTableParams intialization，为了$观察结果findReportData功能外prevent错误和不必要的重新初始化
搜索结果
更新2
我设置普拉克，尽量使其看上去更像原来的问题，和模拟的HTTPService，
但是这没有关系，所有的数据访问必须在的getData 在 ngTableParams 去FUNC和设置您需要的所有过滤器时，调用（或者只是使用 $观看像普拉克）你必须调用 $ scope.tableParams.reload（）; ，你可以尝试输入输入上述数据并没有将相关的排序，pagging和过滤problem.all code可以更新一些数字为清楚起见被删除，
所以的getData 看起来像下面这样：
的getData：功能（$延迟，则params）{
VAR selectedPeriod = $ scope.reportBillingPeriod; // selectedMonth;
如果（selectedPeriod ===空）
selectedPeriod ='0';
$ scope.customers_report = Reports.get（{//Reports.customer_report（{
monthReport：selectedPeriod
}，功能（结果）{
VAR数据= result.customers;
$ scope.tableParams.total（data.length）;
VAR orderedData = params.sorting（）？ $过滤器（'排序依据'）（数据，params.orderBy（））：数据;
$ defer.resolve（orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（）））; }）; }
和留意更换过滤器看起来像如下：
$ scope.reportBillingPeriod = 0;
$范围。$腕表（'reportBillingPeriod'，功能（为newValue，属性oldValue）{
$ scope.tableParams.reload（）;
}）;
更新3 结果
调用的删除重复的getData FUNC，编辑这里
这个问题是在 $摆好观看 reportBillingPeriod 的变量，因此以prevent第二数据上传，我们有检查如何值被改变，喜欢这里
$ scope.reportBillingPeriod =设置defaultValue;
$范围。$腕表（'reportBillingPeriod'，功能（为newValue，属性oldValue）{
//这个我们如何prevent第二个电话
如果（为newValue！=属性oldValue）
$ scope.tableParams.reload（）;
}）;
i have page with ng-table which works fine with initial data. I have a select box which send server request based on the option selected and then Iam getting new data to angular but is not updated with ng-table.
Here is my view:
<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>
My controller:
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 directive create nested scope which inculde all settings for directive to work,so you shoudn't replace it with scope of ReportsController
you need to remove this row
$scope.tableParams.settings().$scope = $scope;
And you need to specify all parameters for ngTable,please have a look
here In ngTables, running $scope.tableParams.reload() for the third time results in TypeError: Cannot set property '$data' of null
UPDATE
and also it's better take ngTableParams intialization and $watch for result outside findReportData function in order to prevent errors and unnecessary re-initialization
UPDATE 2
i set up plunk,try to make it more look like original question,and mock httpservice,
but that's not matter,all data access must be going inside getData func in ngTableParams and when set up all filter you need to call(or maybe just using $watch like in plunk) you have to call $scope.tableParams.reload(); ,you can try to type some numbers in input above and data will be updating without problem.all code related to sorting ,pagging and filtering is removed for clarity,
so getData look like following:
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()));
});
}
and watching for filter change look like follow:
$scope.reportBillingPeriod = 0;
$scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
$scope.tableParams.reload();
});
UPDATE 3
removed duplication of invocation getData func,edited here
the issue was laid in $watch of reportBillingPeriod variable,so in order to prevent second data upload we have to check how values is changed, like here
$scope.reportBillingPeriod = defaultValue;
$scope.$watch('reportBillingPeriod', function(newValue, oldValue) {
//this how we prevent second call
if (newValue!=oldValue)
$scope.tableParams.reload();
});
这篇关于重装请求时NG-表未呈现新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
