Как сделать нажатие кнопки в таблице ng-grid удалить строку из модели?

Я установил следующее с ng-сетью:

    var gridData = {};
    $scope.gridOptions = {
        data: 'gridData',
        enableCellEdit: true,
        multiSelect: false,
        columnDefs: [
            { field: 'testId', displayName: 'Test Id' },
            { field: 'name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
            { field: 'description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
            { field: '', cellTemplate: '<button ng-click="delete(row)">Delete</button>' }
        ]
    };

   $scope.delete = function (row) {
      row.entity.$deleteData({ testId: row.entity.testId });
   }

Это отправляет HTTP-сообщение серверу, который удаляет строку. Однако ряд все еще остается в сетке. Как я могу сделать так, чтобы щелчок кнопки удаления в строке также удаляет строку из объекта gridData?

Ответ 1

Как Валентин Шибанов упомянул об этом в своем комментарии, вы должны проверить, успешно ли сервер удалил объект в базе данных, а затем удалить его из массива gridData.

$scope.delete = function(row) {
    row.entity.$deleteData({testId:row.entity.testId})
        .then(function(response) {
            if (response.status === 'OK') {
                remove($scope.gridData, 'testId', row.entity.testId);
            }
        });
}

// parse the gridData array to find the object with testId
function remove(array, property, value) {
    $.each(array, function(index, result) {
        if (result[property] == value) {
            array.splice(index, 1);
        }
    });    
});

"Удалить функцию" взяли из: fooobar.com/questions/224218/...

Ответ 2

Здесь Plunker для последней версии (3.0.0rc20) ui-grid, чтобы создать определенную строку (т.е. отредактировать, удалить и т.д.):

http://plnkr.co/edit/l7oOIe4w3XzKOnMUGDdr?p=preview

var app = angular.module('plunker', ['ui.grid']);

app.controller('MainCtrl', function($scope) {

  $scope.gridScope = $scope;

  $scope.gridOptions = {
    data: [{
      firstName: 'Frank',
      lastName: 'Zappa'
    }, {
      firstName: 'Giuseppe',
      lastName: 'Verdi'
    }, {
      firstName: 'Mos',
      lastName: 'Def'
    }],
    columnDefs: [{
      field: 'firstName',
      displayName: 'First'
    }, {
      field: 'lastName',
      displayName: 'Last'
    }, {
      field: 'edit',
      cellTemplate: '<button id="editBtn" type="button" class="btn-small glyphicon glyphicon-pencil" ng-click="grid.appScope.editUser(row.entity)" ></button> '
    }]
  };

  $scope.editUser = function(data) {
    alert('Edit ' + data.firstName + ' ' + data.lastName);
  }
});

Он использует только Bootstrap для кнопки глифа. В противном случае вы можете просто использовать Angular с помощью ui-grid.

Это основано на важной заметке в обновлении README для ui-grid:

https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

Кажется, они улучшились в самом запутанном (по крайней мере для меня!) материале "getExternalScopes()", который ранее использовался для выполнения этой работы.