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

Question

当试图在Ui-网格单元格template.When中保存更改时，我在Ui教程中发现，当有一个映射到列：可编辑的字段时，我发现如何保存更改时，我很难理解从哪里开始。

我创建了一个简单的网格作为示例，在一个列中有多个输入文本字段。如何编辑和保存对此网格的更改？使用Kendo +剃刀+ 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>' },
];

当然，让用户界面网格知道你在使用编辑模块

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>

工作柱塞可以找到这里。

Answer 2

如果您想使用他们的编辑功能，您必须将其注入您的模块：

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

然后在您的html中，您需要：

<div ui-grid="gridOptions" class="grid" ui-grid-edit></div>

请参阅柱塞