我想问这些问题,以分享和更好地了解如何更好地使用Angular实现某些事情。

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

1.内联编辑

在单元格上单击,数据变为可编辑的,并且绑定到该单元格的ng-model。因此,当我从单元格ng-blur发送更新到数据库时。另外,我也拥有该单元格的位置,因此,如果将来我需要对该单元格做任何事情,则只需访问我的$scope.array。现在这里有一个小问题,我不确定是否有一个可靠而正确的解决方案。


由于编辑会立即更改范围,所以我不确定
在回调函数中执行。逻辑上的事情是更新
回调成功,否则返回错误。

目前,我是这样实现的:如果成功不做任何事情,
否则让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服务。

最佳答案

(免责声明:也许我不完全了解所讨论情况的复杂性)

假设这是您最初从服务器检索到的数据(我假设每一行都是单元格数组,因为您说过可以按列对其进行排序):

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

09-30 16:02
查看更多