Angular JS UI-Grid Удалить строку

Я новичок в ui-grid, и я пытаюсь реализовать таблицу в AngularJS, как показано на рисунке ниже. Я пытаюсь выбрать строку и удалить ее с помощью кнопки удаления на этой конкретной строке. Документация ui-grid требует от нас использовать gridApi, но я не могу найти достаточную документацию для нее.

Ответ 1

См. рабочий пример того, как удалить строку здесь. http://plnkr.co/edit/6TiFC6plEMJMD4U6QmyS?p=preview

Ключ должен использовать indexOf(row.entity) и не полагаться на row.index, поскольку он не динамически обновляется.

$scope.deleteRow = function(row) {
  var index = $scope.gridOptions.data.indexOf(row.entity);
  $scope.gridOptions.data.splice(index, 1);
};

Общий подход

function deleteRow(row,grid) {
   var i = grid.options.data.indexOf(row.entity);
   grid.options.data.splice(i, 1);
}

Ответ 2

Вы можете использовать решение @Blousie, насколько сможете адаптировать его к новому API: https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

Теперь "grid.appScope.edit(row.entity)" дает вам доступ к вашей функции "редактировать".

Что-то вроде этого:

var removeTemplate = '<button class="btn btn-danger" ng-click="grid.appScope.removeRow(row)"><i class="glyphicon glyphicon-remove"></i></button>';

$scope.removeRow = function(row) {
    var index = $scope.<yourDataModelProperty>.indexOf(row.entity);
    if (index !== -1) {
        $scope.<yourDataModelProperty>.splice(index, 1);
    }
};

Ответ 3

Нам нужно использовать $scope.grid.appScope. Он доступен во всех шаблонах. Кроме того, вам нужно отправить объект строки из шаблона, чтобы вы могли удалить строку из данных сетки.

jsfiddle: http://jsfiddle.net/3ryLqa9e/4/

  cellTemplate:'<button class="btn primary" ng-click="grid.appScope.Delete(row)">Delete Me</button>' 

  $scope.Delete = function(row) {
            var index = $scope.gridOptions.data.indexOf(row.entity);
            $scope.gridOptions.data.splice(index, 1);
        };

Ответ 4

Другие предоставленные здесь решения не сработали для меня (возможно, из-за моей последней версии ui-grid). Так что удаление элемента из массива области работало для меня. Это должно даже работать с другими версиями ui-grid, потому что сетка должна обновляться при изменении данных. (Благодаря Angular!!!)

Я использую lodash для удаления элемента из массива и вот пример кода:

$scope.deleteRow = function(row){
    _.remove($scope.gridData, {
        id: row.id
    });
};

Ответ 5

Просто удалите строку, которую вы хотите удалить, из модели источника данных ui-grid, используя сплайс.

Например

$scope.myGridOptions.data.splice(<YOUR ROW INDEX HERE>, 1);