我想问这些问题,以分享和更好地了解如何更好地使用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);
});