如何过滤角度模型(数组)而不破坏它

111*_*110 5 javascript angularjs angularjs-scope angularjs-filter angular-leaflet-directive

我有一个模型供我观看.
该模型是对象数组:

var arr = { "12345qwery": { prop1: "value", prop2: "value" } } // contains 500 items
Run Code Online (Sandbox Code Playgroud)

今天我用以下方式过滤它:

arr = $filter('filter')(arr, filterTerm); // contains 4 items
Run Code Online (Sandbox Code Playgroud)

在这一行之后我获得了很好的过滤数据但是如果我再次运行这个过滤器我没有500个项目但是4.
为了避免这种情况我将原始数组存储在临时对象中并且当用户更改过滤器时我首先用备份更新arr数据(它是原始的500项)并进行过滤.
现在我遇到麻烦,因为我有多个过滤器,我必须在每个过滤器之前恢复原始数据...无论如何它是一个烂摊子:)
有没有更好的(角度)方式来实现这个javascript过滤?

更新

为了更好地解释我创建的问题是什么问题:

https ://plnkr.co/edit/99b02UtUfPeM3wl4IiX6 ? p = preview

正如您所见,我加载了带有对象的标记,并希望通过文本字段过滤它.
但我不能因为我总是得到一些错误.
我在这里做错了吗?
并且为了避免这种情况并以某种方式实现过滤器,这就是为什么我决定在代码中执行它并在每个过滤器之后保留原始数组,但这是非常复杂的解决方案,我不想以更自然的角度方式进行.

BOUNTY UPDATE

我在js代码中过滤对象,因为我找不到以标准角度方式过滤此指令上的标记的方法.
这就是为什么我在代码中过滤并在过滤器之前总是复制它.
我需要帮助以标准角度方式过滤此指令上的标记对象.
Plunker实现此指令但我不知道如何过滤它.

MrH*_*aze 5

好的.. 所以你有一些事情要做。

问题

  • 范围:将范围移出一点。由于您需要使用filterTerm它需要在您的控制器范围内,因此将范围移出一个级别。我把它移到<body>标签上——见plnkr

  • 结构:尽量在<body>标签末尾包含您的 JS 文件,并确保您的顺序正确。即包括angular.js之前angular-simple-logger.js

  • $scope 的使用:可以直接使用scope,不需要扩展,只会增加阅读难度。

  • 模型结构:您的Markers元素级别太深,我将Markers变量设为标记对象数组。

解决方案

使用 Angular 的filter,挺好的,但需要正确使用。一般是这样的: {{ array_to_filter | filter : filter_term}}

因此,在这种情况下,您可以像这样使用它:

<leaflet defaults="defaults" markers="markers | filter: filterTerm " height="480px" width="640px"></leaflet>

现在应该可以工作了,只需尝试搜索LondonPark

如果您在 JS 代码中使用过滤器,则更容易将其设为变量在其作用域结束时终止的函数。否则,您将始终覆盖您的变量。

TL;RD

这是一个包含工作版本的plnkr