如何在使用单元格模板时保存Angular UI-Grid中的更改？

Question

在尝试保存ui-grid单元模板中的更改时,我无法理解从哪里开始.当我浏览Ui-Grid教程时,我发现的是当单个字段映射到列时如何保存更改:http ://ui-grid.info/docs/#/tutorial/201_editable.

我创建了一个简单的网格作为一个示例,在一列中有多个输入文本字段.您将如何处理编辑并保存对此网格的更改？使用Kendo + razor + c#我能够保存包含8-9个变量的列中的更改.我无法理解如何使用角度ui网格来做到这一点.

总而言之,我希望一旦他或她完成网格中的数据编辑,就可以单击网格外的单个保存按钮.

这是我的简单网格示例的链接:http://plnkr.co/edit/IeYWL62Oa182crRUEtX4？p = info

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

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.gridOptions = {
      rowHeight: 40,
      enableHorizontalScrollbar: 0,
      enableVerticalScrollbar: 0,
    };

    $scope.gridOptions.columnDefs = 
    [{ name: 'id', width: 35},
     { name: 'template',
       cellTemplate: '<div><input type="text" class="form-control" ng-input="row.entity.name" ng-model="row.entity.name" /></div>' + 
                     '<div><input type="text" class="form-control" ng-input="row.entity.age" ng-model="row.entity.age" /></div>' },
    ];

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

Answer 1

这是一种非常天真的方式,没有任何检查.它只是为了说明一种解决问题的方法.

以下代码将跟踪表中已更改的对象.请记住,没有进行任何检查,您仍然需要过滤双打,删除可能已撤消更改的对象等等...

$scope.arrayOfChangedObjects = [];

$scope.objectHasChanged = function(object) {
    $scope.arrayOfChangedObjects.push(object);
}; 

然后一个功能保存.

$scope.save = function() {
  for(var i = 0; i < $scope.arrayOfChangedObjects.length; i++) {
      //do the saving
  }
};

调整模板以调用这些方法.注意grid.appScope.method()!

$scope.gridOptions.columnDefs = 
[{ name: 'id', width: 35},
 { name: 'template',
   cellTemplate: '<div><input type="text" ng-change="grid.appScope.objectHasChanged(row.entity)" class="form-control" ng-input="row.entity.name" ng-model="row.entity.name" /></div>' + 
                 '<div><input type="text" ng-change="grid.appScope.objectHasChanged(row.entity)" class="form-control" ng-input="row.entity.age" ng-model="row.entity.age" /></div>' },
];

当然让ui-grid知道你正在使用编辑模块

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

<div ng-controller="MainCtrl">
  <button ng-click="save()">save</button>
  <div ui-grid="gridOptions" class="grid" ui-grid-edit></div>
</div>

在这里可以找到工作的plunker .