通过多个异步调用持久化记录选择的 AngularJS 模式？答案

【问题标题】：AngularJS pattern for persisting record selection through multiple asynchronous calls?通过多个异步调用持久化记录选择的 AngularJS 模式？
【发布时间】：2013-06-24 16:56:12
【问题描述】：

我们正在为一个相当大的应用程序开发 CRUD 模式。我们用来定义一对多关系的一种常见 UI 模式，其中记录通过复选框关联。挑战在于通过刷新记录列表（和关联的 ng-model）的异步调用（搜索/排序）来保持选择（选中/未选中）。我想听听更高级的 AngularJS 用户（我是菜鸟）什么被认为是最好的做法？感谢任何反馈！

编辑

Here's a working plunk 展示了我目前对 Angular 的理解最有可能解决这个问题的方法。如果您有更好的方法，请告诉我！

【问题讨论】：

这听起来像是“你能为我编程这个”类型的问题，这不是 SO 可接受的类型。要么显示您迄今为止尝试过的内容以及您遇到的问题，要么预计此问题很快就会结束。
我的第一个想法是创建一个$scope.selectedUsers = [] 并在选中/取消选中列表中的项目时填充它，但这似乎有点草率？
我认为这可能是最简单的方法，Brian。然后通过检查 selectedUsers 中的存在来设置每一行的选定状态。如果从列表中删除选定的某人，您最终将在 selectedUsers 中获得不再有效的用户。没关系……除非后来的电话让他们回来，他们突然又被选中了。（还有另一种可能保留 ng-model 的使用，但我想在推荐之前尝试一下。有小提琴吗？）
谢谢@SMcCrohan，我对 ng-model 方法非常好奇。我真的希望有一种方法可以利用它。我会尽快整理并发布。
我喜欢你的照片。有什么app可以制作吗？顺便说一句，如果您没有，请查看 todomvc.com/architecture-examples/angularjs/# 来源可能会有所帮助

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

我认为您可以维护一个单独的选定名称集合。因此，下次您过滤列表时，您只需在集合中查找以保持项目被选中。您可以通过在控制器中绑定一些变量 (arrSelected) 来做到这一点，或者您也可以创建一个单独的服务。

【讨论】：

我喜欢这种服务方式。最好将选择存储在本地存储中，以防止在页面刷新时丢失。服务方法将使其非常便携。谢谢！
将集合设为哈希，您的查找时间/开销为 0：ng-model="selectedItems[item.id]"
是的，我也是这么想的。仍然需要注意从列表中删除但又被读取的项目的选择状态。

【解决方案2】：

您是否考虑过使用过滤器而不是重新获取。当然，这实际上取决于您计划拥有多少项目，但我已经成功过滤了包含大约 5000 个项目的嵌套 JSON 对象。

这是完整的插件：http://plnkr.co/edit/l4jYgt0LjRoP2H0YuTIT?p=preview

亮点：在 index.html 中重复添加 |过滤

<tr ng-repeat="user in users | filter:userFilter">

在 script.js 中，我们添加过滤器函数和 $scope 变量来保存过滤后的字母：

$scope.filteredLetter
$scope.userFilter = function (elem) {
  if (elem.name.lastIndexOf($scope.filteredLetter, 0) === 0 || $scope.filteredLetter == '') {
    return true;
  } else {
    return false
  }
}

作为奖励，我在 ng-class 中添加了显示突出显示的字母。

相当简单的代码，但现在即使人们改变事物，它也能让你完全持久。您现在甚至可以尝试添加一个带有 ng-model 绑定的 <input> 标记来表示 $scope.filteredName。然后你需要做的就是将JS添加到过滤器中，以便对部分名称进行更深的过滤。

【讨论】：

我喜欢这种方法，谢谢！问题。您提到获得可接受的性能过滤 5000 条记录？在那种情况下，您查看了多少“列”？您是否注意到性能在什么时候开始受到影响？
嗨，Brian，我在最后一个级别使用了大约 8 个数据点。我应该提到这是一个树结构，所以可能比你正在做的更复杂。因为我的系统有一组固定的点（练习），所以我并没有真正费心进一步测试。对于你的场景，我想你可以复制你的用户表几次来测试它。