Angularjs 如何在表中动态地重新绘制数据。角工作台
我的控制器只有一个函数getList()。当我第一次调用它时,一切都很好,我的表显示了正确的数据。但当我再次调用此函数时(使用新参数以获得不同的响应数据),表中仍然有第一次调用的数据。如何重新加载/重画/刷新数据Angularjs 如何在表中动态地重新绘制数据。角工作台,angularjs,ngtable,Angularjs,Ngtable,我的控制器只有一个函数getList()。当我第一次调用它时,一切都很好,我的表显示了正确的数据。但当我再次调用此函数时(使用新参数以获得不同的响应数据),表中仍然有第一次调用的数据。如何重新加载/重画/刷新数据 module.controller("IPsCtrl", function($scope, $filter, IPService, ngTableParams) { $scope.data_out = { 'ip_pattern' : '%',
module.controller("IPsCtrl", function($scope, $filter, IPService, ngTableParams) {
$scope.data_out = {
'ip_pattern' : '%',
};
$scope.getList = function() {
$scope.data=IPService.getList($scope.data_out,
function(response) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
filter: {
id: '' // initial filter
},
sorting: {
id: 'asc' // initial sorting
}
}, {
total: response.list.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(response.list, params.filter()) :
response.list;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
response.list;
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
};
});
这里是html视图
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'id'" filter="{ 'id': 'text' }">
{{user.id}}
</td>
<td data-title="'Age'" sortable="'value'" filter="{ 'value': 'text' }">
{{user.value}}
</td>
</tr>
</table>
{{user.id}
{{user.value}}
有一种方法可以做到这一点:
$scope.tableParams.reload();
只需在更新表中显示的数据后调用它
编辑:
首先,我认为您目前使用的ngTable是不正确的。我认为最好的做法不是将表直接绑定到响应数据,而是将响应数据存储在$scope变量中,然后将其附加到表中。这样,您只需操作$scope数据并调用reload即可。
从这里开始,只需更新存储的数据,然后调用reload:
// Store your data in a dedicated variable
$scope.myData = response.list;
// Update ngTable to reflect the new data
if ($scope.tableParams) {
$scope.tableParams.reload();
} else {
// create your table as before,
// but tying it to $scope.myData
// instead of response.list
}