uiグリッドは、更新されたセルデータをデータベースに保存します。

Question

私はグリッド編集セル機能を使用しています。残りのAPIを使用して編集したセルの値をデータベースに更新する必要があります。また、どのように私はコントローラで選択された行のリストを取得することができます。

私の作業コード

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']); 

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
     $scope.gridOptions = { }; 

     $scope.gridOptions.columnDefs = [ 
     { name: 'id', enableCellEdit: false}, 
     { name: 'name' }, 
     { name: 'age', displayName: 'Age' , type: 'number', width: '10%' } 
     ]; 


     $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
     .success(function(data) { 
      $scope.gridOptions.data = data; 
     }); 
    }]) 

Plunker

Answer 1

あなたのコントローラに以下を追加します。

$scope.gridOptions.onRegisterApi = function(gridApi) { 
    //set gridApi on scope 
    $scope.gridApi = gridApi; 
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) { 
    //Do your REST call here via $http.get or $http.post 

    //Alert to show what info about the edit is available 
    alert('Column: ' + colDef.name + ' ID: ' + rowEntity.id + ' Name: ' + rowEntity.name + ' Age: ' + rowEntity.age); 
    }); 
}; 

あなたは列が（colDef.nameに）編集されたかについてのすべての情報を持っているとどのようなセルの実際の値は（rowEntity.xxx）です。

不要なトラフィックを避けるために、REST APIを呼び出すだけで済みます（newValueとoldValueを比較して内容が実際に変更されたかどうかを確認することもできます）。

変更が既にスコープに適用されているため、データを再読み込みする必要はありません。

ここにforked Plunkerがあります。

いずれの行も選択できません。そして、これは少し複雑になるかもしれません。この問題について新しい質問を（新しいPlunkerで）開始してください。