如何在不破坏角度模型的情况下对其进行过滤 [英] How to filter angular model (array) without destroying it
问题描述
我有一个模型供参考.
该模型是对象数组:
var arr = { "12345qwery": { prop1: "value", prop2: "value" } } // contains 500 items
今天，我通过以下方式对其进行过滤:
arr = $filter('filter')(arr, filterTerm); // contains 4 items
在这一行之后，我得到了很好的过滤数据，但是如果我再次运行此过滤器，则其中没有500个项目，而只有4个.
因此，为避免这种情况，我将原始数组存储在临时对象中，当用户更改过滤器时，我首先使用备份数据(原始500项)更新了arr并进行了过滤.
现在，我遇到了麻烦，因为我有多个过滤器，而且必须在每个过滤器之前恢复原始数据……反正一团糟:)
有没有更好的(角度)方式在javascript过滤中做到这一点?
更新
为了更好地说明问题，我创建了插件:
https://plnkr.co/edit/99b02UtUfPeM3wl4IiX6?p=preview
如您所见，我加载了带有对象的标记，并希望通过文本字段对其进行过滤.
但是我总是无法得到一些错误.
我在这里做错什么了吗?
为了避免这种情况并以某种方式实现过滤器，这就是为什么我决定在代码中执行此操作并在每个过滤器之后保留原始数组的原因，但这是非常复杂的解决方案，因此我不想以更自然的角度进行制作.
赏金更新
我正在用js代码过滤对象，因为无法找到以标准角度方式过滤此指令上的标记的方法.
这就是为什么我过滤代码并且在过滤之前总是对其进行复制的原因.
Plunker实现了该指令，但我不知道如何过滤它.
好.
问题
-
作用域:将范围稍微移开.由于您需要使用
filterTerm，因此它必须在控制器作用域内，因此请将作用域移出一个级别.我将其移至<body>标记-请参见 plnkr . -
结构:尝试始终在
<body>标记的末尾包含JS文件，并确保顺序正确.即在angular-simple-logger.js之前加入 -
使用$ scope :您可以直接使用范围，而无需扩展它，这只会使阅读变得困难.
-
模型结构:您的
Markers元素太深了，我将Markers变量设置为标记对象的数组.
angular.js
解决方案
使用Angular的过滤器，它很好，但是需要正确使用.
通常是这样的:
{{ array_to_filter | filter : filter_term}}
因此，在这种情况下，您可以像这样使用它:
<leaflet defaults="defaults" markers="markers | filter: filterTerm " height="480px" width="640px"></leaflet>
现在应该可以工作，只需尝试搜索London或Park.
如果在JS代码中使用过滤器，则将其设置为一个函数，使变量在作用域末尾消失，会更容易.否则，您将始终覆盖您的变量.
TL; RD
这是包含工作版本的 plnkr .
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
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.
Issues
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.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 includeangular.jsbeforeangular-simple-logger.jsUse of $scope: You can use scope directly, you don't need to extend it, that just makes it harder to read.
Model structure: Your
Markerselements are a level too deep, I make theMarkersvariable an array of marker objects.
Solution
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" markers="markers | filter: filterTerm " height="480px" width="640px"></leaflet>
Should be working now, just try to search for London or Park.
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.
TL;RD
Here's a plnkr containing the working version.
这篇关于如何在不破坏角度模型的情况下对其进行过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
