ng-ızgara tablosundaki bir düğmenin tıklatılmasını modelden bir satırı silebilirim?

Question

I ng ızgara ile takip ederek belirledik:

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

ve:

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

Bu satırı siler sunucuya bir HTTP mesajı gönderir. Ancak, sıra hala kılavuzda kalır. Bir satırdaki silme düğmesi tıklatması da gridData nesnesindeki bir satırı siler?

Answer 1

Valentyn Shybanov10, kendi yorumunda, sunucunun veritabanındaki nesneyi başarıyla silip silmediğini kontrol etmeli ve ardından gridData dizisinden kaldırılmasını kontrol etmelisiniz. (Yani edit vb silme) bir sıra belirli bir düğmeyi yapmak İşte Plunker ui-ızgaranın son sürümü (3.0.0rc20) içindir 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); 
     } 
    });  
}); 

"fonksiyonu Kaldır" dan alınmıştır :

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

sadece kabartma düğmesi için Bootstrap kullanır

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

. Aksi takdirde sadece Ugular-grid ile Angular kullanabilirsiniz. (En azından benim için!)

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

Onlar için çok kafa karıştırıcı üzerinde düzeldi görünüyor "getExternalScopes()":

Bu

ui-grid için yükseltme README önemli bir not dayanmaktadır Bu işi yapmak için daha önce kullanılmış olan şeyler.