Jose Jose - 6 months ago 108
Javascript Question

How to properly delete selected items ui.grid Angular JS

I am having some difficulties understanding the properties/functions available through ui-grid. I often get confused with its previous version ng-grid. I am trying to find what the best way of deleting a checked-entry would be. Here is my markup, but due to not quite understanding if I have an index, or count available through a row entity:


<div class="form-group">
<button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button>
<button type="button" id="removeData" class="btn btn-success" ng-click="removeData()">Remove First Row</button>
<div id="grid1" ui-grid="gridOptions" ui-grid-edit ui-grid-selection external-scopes="myViewModel" class="grid"></div>

which lies under my controller:

$scope.removeData = function () {

var items = $scope.gridApi.selection.getSelectedRows();

angular.forEach($scope.myData, function (data, index) {
angular.forEach(items, function (item) {
if (item.displayValue = data.displayValue)
$scope.myData.splice(index, 1);


is a property of my column and
is my data. Is there a different way to send that selection to the controller for removal? The current way I have it does NOT work (obviously). Any help will be appreciated. If my markup is incomplete, I'll update it as necessary. Thank you!


Your solution looks a little complicated. Here is my delete function:

$scope.deleteSelected = function(){
  angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
    $$, 1);

Here is a plunker based on the 210_selection tutorial.