Question

我要求分享这些问题并更好地理解如何更好地实现Angular的某些功能。

注意*前端是Angular。后端是Django

1。内联编辑

单击单元格后，数据变为可编辑状态，并且绑定到该单元格的ng-model。所以当我从一个单元格ng-blur时，我会向数据库发送更新。此外，我具有该单元格的位置，因此如果我将来需要对该单元格执行任何操作，则只需持续访问我的$scope.array。现在这里有一个小问题，我不确定是否有一个可靠的解决方案。

由于编辑会立即改变范围，所以我不确定是什么在回调函数中做。合乎逻辑的是更新if 回调是成功的，否则如果错误。

目前我实施这种方式：如果成功不做任何事，否则让Django发送未更改的数据来更新我的记录（还原更新）。

2。使用表单编辑行中的单元格

我有一个额外的操作列（编辑，删除...）。如果用户点击编辑操作，我会将该行的数据加载到表单中。用户将进行更改并将新行保存到数据库。

在回调成功时，我获得了新的更新行。因为我知道表中行的$index，我仍然可以使用常量时间访问到$scope.array更新该行。错误时什么都不做（显示一个错误或警告信息）。

我关注的是整个应用程序的一致性。正如您所注意到的，我使用索引来避免循环。   有关上述要点的任何提示或建议吗？

其他问题：我介绍了使用orderBy:’column-heading’:Boolean的表格排序。视图上正在进行排序，但这并不反映在$ scope.array上。这会弄乱我的指数，因为它们代表视图上的位置而不是$scope.array中的位置。此时，我无法在固定时间内更新$scope.array。我必须使用循环。   有关此问题的任何提示吗？

注意：排序是在html ng-repeat="item in items | orderBy:predicate:reverse"中完成的。这不会对实际数组进行排序，这会弄乱我的索引。现在我想手动排序。每次点击标题时，ng-click都会调用控制器中的函数来使用$filter服务。

Answer 1

（免责声明：也许我并不完全理解有关情况的复杂性）

假设这是您最初从服务器检索到的数据（我假设每行都是一个单元格数组，因为您说可以按列对其进行排序）：

$scope.items = [
  {id: 123, data: [{c: "Col1", v: "aaa"}, {c: "Col2", v: "bbb"}, ..], // row 0
  {id: 456, data: [{c: "Col1", v: "zzz"}, {c: "Col2", v: "www"}, ..], // row 1
  // etc...
];

在视图中渲染时，每个ng-model都会正确绑定到正确的对象，无论您是否对其进行排序。

<tr ng-repeat="row in items">
   <td><button ng-click="edit(row)">edit</button></td>
   <td ng-repeat="cell in row.data | orderBy: '-c'">
      <input ng-model="cell.v" ng-blur="saveItem(row, cell)">
   </td>
</tr>

调用saveItem时，实际对象将传递给函数。

$scope.saveItem = function(row, cell){
   $log.log(cell);
   YourSvc.saveRecord(row);
}

现在，有时保留数据的主版本和副本版本是个好主意。这允许您重置视图，例如，如果对服务器的HTTP调用失败。这也是为什么我不认为依靠你的后端向你发送“未更改的数据”是一个好主意 - HTTP调用本身可能会失败。如果发生这种情况，您可以选择在客户端重置数据。

要在主数据和副本之间保持引用，在首次克隆数据时需要更多协调，并且取决于您的数据，更改的粒度等。

例如，行是最精细的保存单位：

angular.forEach($scope.items, function(row){
  row._copy = angular.copy(row.data);
});

然后，保存时：

YourSvc.saveRecord(row)
   .then(function(data){
      if (data.isSuccess) {
        row._copy = angular.copy(row.data);
      } else {
        row.data = angular.copy(row._copy);
      }
   })
   .catch(function(e){
      row.data = angular.copy(row._copy);
   });

使用Angular JS表格单元格编辑的更好方法

1 个答案: