AngularJS的ng表重新加载不起作用(AngularJS's ng

AngularJS的ng表重新加载不起作用(AngularJS's ng-table reload not working)

我一直在使用Google，并没有解决方案为我工作。 我有一个AngularJS页面，它只有一小部分没有异形或任何东西的数据，我只想删除一个条目并让表更新。 然而，我对$ scope.tableParams.reload（）的调用没有任何作用。 这是我的控制器：

app.controller('viewVersion', ['$scope', '$filter', '$RestService', 'NgTableParams', '$cookies', '$routeParams', '$q', 'Flash', '$location', function($scope, $RestService, NgTableParams, $cookies, $routeParams, $q, Flash, $location) { $scope.version = {id:null, version:null, comment:null, states:[]}; $scope.permissions=$cookies.get('permissions'); var promise = $RestService.StateList(); //Get the list of states to use to map state ids to their names (BOI, REQ, etc). promise.success(function(data) { $scope.stateList = data; }); promise.then(function(){ var inprom = $RestService.GetVer($routeParams.verid); //Get the version from the API given the version id. inprom.success(function(data){ data.forEach(function(ver) { $scope.version['id'] = ver.id; $scope.version['version'] =ver.version; $scope.version['platform'] =ver.platform; $scope.version['comment'] = ver.comment; if (ver.state!=null) { var state_info = _.where($scope.stateList, {state_id:ver.state})[0]; $scope.version.states.push({state:state_info.state_name, state_id:ver.state, launch:ver.launch}); } }); }) inprom.error(function(errorData) { $cookies.set('flash_message', "Error getting version with ID "+$routeParams.verid); }); inprom.then(function() { $scope.tableParams = new NgTableParams({ sorting: { launch: "desc" } }, { counts:[], total: $scope.version.states.length, filterDelay: 0, dataset: angular.copy($scope.version.states) }); }); }); $scope.delete = function(row) { _.remove($scope.tableParams.settings().dataset, function(item) { return row.state_id === item.state_id; }); $scope.tableParams.total($scope.tableParams.settings().dataset.length); $scope.tableParams.reload(); }; }]);

和匹配的html：

<table ng-table="tableParams" class="table table-bordered table-hover table-condensed editable-table" ng-form="tableForm"> <tr ng-repeat="state in version.states" ng-form="stateForm"> <td title="'State'" sortable="'state'">{{state.state}}</td> <td title="'Launch Date'" sortable="'launch'" ng-switch="state.isEditing" ng-form="launch"> <span ng-switch-default class="editable-text">{{state.launch | date:'medium':'UTC'}}</span> <div class="controls" ng-class="stateForm.$invalid ? 'has-error' : ''" ng-switch-when="true"> <input type="text" name="name" ng-model="state.launch" class="editable-input form-control input-sm" required /> <p ng-show="stateForm.$invalid && !stateForm.$pristine" class="help-block">Enter a valid date and time.</p> </div> </td> <td> <button class="btn btn-primary btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="save(state, stateForm)" ng-if="state.isEditing" ng-disabled="stateForm.$pristine || stateForm.$invalid"><span class="glyphicon glyphicon-ok"></span></button> <button class="btn btn-default btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="cancel(state, stateForm)" ng-if="state.isEditing"><span class="glyphicon glyphicon-remove"></span></button> <button class="btn btn-default btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="state.isEditing = true" ng-if="!state.isEditing"><span class="glyphicon glyphicon-pencil"></span></button> <button class="btn btn-danger btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="delete(state)" ng-if="!state.isEditing"><span class="glyphicon glyphicon-trash"></span></button> </td> </tr> </table>

任何帮助将非常感激。 谢谢！

I have been googling and none of the solutions have worked for me. I have an AngularJS page that simply has a small set of data with no paganation or anything and I just want to be able to delete an entry and have the table update. However my call to $scope.tableParams.reload() just doesn't do anything. Here is my controller:

app.controller('viewVersion', ['$scope', '$filter', '$RestService', 'NgTableParams', '$cookies', '$routeParams', '$q', 'Flash', '$location', function($scope, $RestService, NgTableParams, $cookies, $routeParams, $q, Flash, $location) { $scope.version = {id:null, version:null, comment:null, states:[]}; $scope.permissions=$cookies.get('permissions'); var promise = $RestService.StateList(); //Get the list of states to use to map state ids to their names (BOI, REQ, etc). promise.success(function(data) { $scope.stateList = data; }); promise.then(function(){ var inprom = $RestService.GetVer($routeParams.verid); //Get the version from the API given the version id. inprom.success(function(data){ data.forEach(function(ver) { $scope.version['id'] = ver.id; $scope.version['version'] =ver.version; $scope.version['platform'] =ver.platform; $scope.version['comment'] = ver.comment; if (ver.state!=null) { var state_info = _.where($scope.stateList, {state_id:ver.state})[0]; $scope.version.states.push({state:state_info.state_name, state_id:ver.state, launch:ver.launch}); } }); }) inprom.error(function(errorData) { $cookies.set('flash_message', "Error getting version with ID "+$routeParams.verid); }); inprom.then(function() { $scope.tableParams = new NgTableParams({ sorting: { launch: "desc" } }, { counts:[], total: $scope.version.states.length, filterDelay: 0, dataset: angular.copy($scope.version.states) }); }); }); $scope.delete = function(row) { _.remove($scope.tableParams.settings().dataset, function(item) { return row.state_id === item.state_id; }); $scope.tableParams.total($scope.tableParams.settings().dataset.length); $scope.tableParams.reload(); }; }]);

And the matching html:

<table ng-table="tableParams" class="table table-bordered table-hover table-condensed editable-table" ng-form="tableForm"> <tr ng-repeat="state in version.states" ng-form="stateForm"> <td title="'State'" sortable="'state'">{{state.state}}</td> <td title="'Launch Date'" sortable="'launch'" ng-switch="state.isEditing" ng-form="launch"> <span ng-switch-default class="editable-text">{{state.launch | date:'medium':'UTC'}}</span> <div class="controls" ng-class="stateForm.$invalid ? 'has-error' : ''" ng-switch-when="true"> <input type="text" name="name" ng-model="state.launch" class="editable-input form-control input-sm" required /> <p ng-show="stateForm.$invalid && !stateForm.$pristine" class="help-block">Enter a valid date and time.</p> </div> </td> <td> <button class="btn btn-primary btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="save(state, stateForm)" ng-if="state.isEditing" ng-disabled="stateForm.$pristine || stateForm.$invalid"><span class="glyphicon glyphicon-ok"></span></button> <button class="btn btn-default btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="cancel(state, stateForm)" ng-if="state.isEditing"><span class="glyphicon glyphicon-remove"></span></button> <button class="btn btn-default btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="state.isEditing = true" ng-if="!state.isEditing"><span class="glyphicon glyphicon-pencil"></span></button> <button class="btn btn-danger btn-sm" ng-show="permissions.indexOf('admin') > -1" ng-click="delete(state)" ng-if="!state.isEditing"><span class="glyphicon glyphicon-trash"></span></button> </td> </tr> </table>

Any help would be very appreciated. Thanks!

最满意答案

您的行直接来自您的数据， <tr ng-repeat="state in version.states">

...但你的删除函数是从ng-table的数据副本中删除行：

$scope.delete = function(row) { _.remove($scope.tableParams.settings().dataset, function(item) { return row.state_id === item.state_id; }); $scope.tableParams.total($scope.tableParams.settings().dataset.length); $scope.tableParams.reload(); };

您想从ng-table的副本中提取行： <tr ng-repeat="state in $data">

这是一个简化的演示： http : //plnkr.co/edit/kuAdN3ToKDZtp338E6Hp?p=preview

Your rows are coming directly from your data, <tr ng-repeat="state in version.states">

...but your delete function is removing rows from ng-table's copy of the data:

$scope.delete = function(row) { _.remove($scope.tableParams.settings().dataset, function(item) { return row.state_id === item.state_id; }); $scope.tableParams.total($scope.tableParams.settings().dataset.length); $scope.tableParams.reload(); };

You want to pull your rows from ng-table's copy instead: <tr ng-repeat="state in $data">

Here is a simplified demo: http://plnkr.co/edit/kuAdN3ToKDZtp338E6Hp?p=preview