web-dev-qa-db-ja.com

Angular JS UI-Grid Delete Row

私はui-gridと私は、下の画像に示すように、AngularJSでテーブルを実装しようとしています。行を選択して、その特定の行の削除ボタンを使用して削除しようとしています。 ui-gridドキュメントではgridApiを使用する必要がありますが、それについて十分なドキュメントが見つかりません。

enter image description here

angularjsangular-ui-grid
12
Sur

ここで行を削除する方法の実際の例を参照してください。 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);
}
17
Blowsie

新しいAPIに適応する限り、@ Blousieソリューションを使用できます。 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);
    }
};
4
Diego Pamio

ここで提供されている他のソリューションは私にとってはうまくいきませんでした（おそらく私の最新の異なるバージョンのui-gridが原因です）。したがって、スコープ配列から要素を削除するのがうまくいきました。データが変更されたときにグリッドを更新する必要があるため、これは他のバージョンのui-gridでも機能します。 （Angularに感謝!!!）

Lodashを使用して配列から要素を削除していますが、サンプルコードは次のとおりです。

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

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

スプライスを使用して、ui-gridsデータソースモデルから削除する行を削除するだけです。

例えば

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