如何过滤角度模型(数组)而不破坏它 [英] How to filter angular model (array) without destroying it
问题描述
我有一个视图模型.
该模型是对象数组:
I have a model for my view.
That model is array of objects:
var arr = { "12345qwery": { prop1: "value", prop2: "value" } } // contains 500 items
今天我用以下方式过滤它:
And today I am filtering it in the following way:
arr = $filter('filter')(arr, filterTerm); // contains 4 items
在这行之后，我得到了很好的过滤数据，但是如果我再次运行这个过滤器，我里面没有 500 个项目，而是 4 个.
因此，为了避免这种情况，我将原始数组存储在临时对象中，当用户更改过滤器时，我首先使用备份数据更新 arr(它是原始 500 项)并进行过滤.
现在我遇到了麻烦，因为我有多个过滤器，我必须在每个过滤器之前恢复原始数据......无论如何它是一团糟:)
有没有更好的(有角度的)方法可以在 javascript 过滤中做到这一点?
更新
为了更好地解释问题，我创建了plunker:
https://plnkr.co/edit/99b02UtUfPeM3wl4IiX6?p=preview
如您所见，我使用对象加载标记并希望通过文本字段对其进行过滤.
但我不能，因为我总是会遇到一些错误.
我在这里做错了什么吗?
并且为了避免这种情况并以某种方式实现过滤器，这就是为什么我决定在代码中执行它并在每个过滤器之后保留原始数组，但这是非常复杂的解决方案，我不想以更自然的角度方式制作它.
赏金更新
我在 js 代码中过滤对象，因为我找不到以标准角度方式过滤此指令上的标记的方法.
这就是为什么我在代码中过滤并且在过滤之前总是复制它.
我需要帮助以标准角度方式过滤此指令上的标记对象.
Plunker 实现了这个指令，但我不知道如何过滤它.
And after this line I get nice filtered data but if I run this filter again I don't have 500 items in it but 4.
So to avoid this I store original array in temporary object and when user change filter I first update arr with backup data (it's original 500 items) and do the filtering.
Now I get in trouble as I have multiple filters and I must restore original data before each filter... anyway it is a mess :)
Is there any better (angular) way to make this in javascript filtering?
UPDATE
To explan better what is issue I created plunker:
https://plnkr.co/edit/99b02UtUfPeM3wl4IiX6?p=preview
As you can see I load markers with objects and want to filter it via text field.
But I can't as I always get some errors.
Am I doing anything wrong here?
And to avoid this and implement filter somehow that is why I decided to do it in code and keep original array after each filter, but this is very complex solution and I wan't to make it in a more natural angular way.
BOUNTY UPDATE
I am filtering object in js code because I can't find a way to filter markers on this directive in a standard angular way.
That is why I filter in code and before filter always make a copy of it.
I need help to filter marker objects on this directive in a standard angular way.
Plunker implement this directive but I don't know how to filter it.
推荐答案
好的.. 所以你有一些事情要做.
Ok.. So you have a few things going on.
范围:将范围移出一点.由于您需要使用
filterTerm它需要在您的控制器范围内，因此将范围移出一个级别.我把它移到标签 - 见 plnkr.
Scoping: Move your scope a bit out. Since you need to use
filterTermit needs to be within your controller scope, so move the scope a level out. I moved it out to the<body>tag - see plnkr.
结构:尽量在 标签的末尾包含你的 JS 文件，并确保你的顺序正确.即在 angular-simple-logger.js
Structure: Try to always include your JS files at the end of the <body> tag, and make sure you have the right order. I.e include angular.js before angular-simple-logger.js
$scope 的使用:可以直接使用 scope，不需要扩展，只会增加阅读难度.
Use of $scope: You can use scope directly, you don't need to extend it, that just makes it harder to read.
模型结构:您的 Markers 元素太深了，我将 Markers 变量设为标记对象数组.
Model structure: Your Markers elements are a level too deep, I make the Markers variable an array of marker objects.
使用Angular的filter，挺好的，但是需要正确使用.一般是这样的:<代码>{{ array_to_filter |过滤器:filter_term}}
Use Angular's filter, it's pretty good, but need to be used properly.
Generally it's like this:
{{ array_to_filter | filter : filter_term}}
所以在这种情况下，您可以像这样使用它:
So in this case you can use it like so:
<代码><leaflet defaults="defaults" marker="markers | filter: filterTerm " height="480px" width="640px"></leaflet>
现在应该可以工作了，只需尝试搜索 London 或 Park.
Should be working now, just try to search for London or Park.
如果您在 JS 代码中使用过滤器，则可以更轻松地将其设为变量在其作用域结束时终止的函数.否则，您将始终覆盖您的变量.
If you use a filter in your JS code it's easier to just make it a function where the variable dies at the end of it's scope. Otherwise you will always be overwriting your variable.
这是包含工作版本的 plnkr.
Here's a plnkr containing the working version.
这篇关于如何过滤角度模型(数组)而不破坏它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
