Jak mogę kliknąć przycisk w tabeli ng-grid, aby usunąć wiersz z modelu?

Question

mam założyć następujące NG-Grid:

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>' } 
     ] 
    }; 

oraz:

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

ten wysyła komunikat do serwera HTTP, który usuwa wiersz. Jednak rząd nadal pozostaje w sieci. Jak mogę to zrobić, aby kliknięcie przycisku usuwania w wierszu także usunęło wiersz z obiektu gridData?

Answer 1

Podobnie jak Valentyn Shybanov wspomniał o tym w swoim komentarzu, należy sprawdzić, czy serwer pomyślnie usunął obiekt w bazie danych, a następnie usunąć go z tablicy 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); 
     } 
    });  
}); 

„Usuń Funkcja” został zaczerpnięty z: https://stackoverflow.com/a/6310763/1036025

Answer 2

Oto Plunker do najnowszej wersji (3.0.0rc20) z UI-siatki, aby przycisk określonego wiersza (tj edytować, usuwać itp) :

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); 
    } 
}); 

używa tylko Bootstrap dla przycisku glifów. W przeciwnym razie możesz po prostu użyć Angular z ui-grid.

ta opiera się na ważnej notatki w README aktualizacji UI siatki:

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

Wydaje się, że poprawiły się na bardzo skomplikowane (przynajmniej dla mnie!) „GetExternalScopes()” rzeczy, które wcześniej były używane do tego działania.