ng-grid 표에서 버튼을 클릭하면 모델에서 행을 삭제할 수 있습니까?

Question

나는 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 객체에서 행이 삭제됩니다.

Answer 1

마찬가지로 Valentyn Shybanov 그의 코멘트에서 언급했듯이 서버가 데이터베이스에서 개체를 성공적으로 삭제했는지 확인한 다음 gridData 배열에서 개체를 제거해야합니다. (즉, 편집 등을 삭제) 행 특정 버튼을 만들기 위해 여기 Plunker은 UI 그리드의 최신 버전 (3.0.0rc20)에 대한의 https://stackoverflow.com/a/6310763/1036025

Answer 2

:

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

는 "기능 제거"에서 찍은 :

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

그것은 단지 글리프 버튼 부트 스트랩을 사용

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

. 그렇지 않으면 단지 ui-grid와 함께 Angular를 사용할 수 있습니다. (적어도 나를 위해!)

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

그것은 그들이 매우 혼란에 개선 된 것 같다 "getExternalScopes()"

이

은 UI 그리드의 업그레이드 README에서 중요한 노트를 기반으로 이전에이 작업을하기 위해 사용 된 것들.