How to filter angular model (array) without destro

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.

标签： javascript angularjs angularjs-scope angularjs-filter angular-leaflet-directive

11条回答

地球回转人心会变

2楼-- · 2019-06-21 11:06

You're overwriting your array with the new filtered array.

arr = $filter('filter')(arr, filterTerm);

Is the same as

var x = 5;
x = x+4;

0人赞添加讨论(0) 举报

我命由我不由天

3楼-- · 2019-06-21 11:06

One way to accomplish this is to create two copies of data. keep original same as ever and assign filtered copy of data to map as marker. when ever user changes filter term, apply filter on Original data and assign result to filtered data variable. for instance,

$scope.orignalMarkers = {1,2,3,4}
$scope.filteredMarkers = $scope.orignalMarkers // initial values for both are same

watch (filterTerm){
   $scope.filteredMarkers = $filter on $scope.orignalMarkers
}
$scope.filteredMarkers// assign this variable to map.

forgive my coding, its just sudo.

0人赞添加讨论(0) 举报

Ridiculous、

4楼-- · 2019-06-21 11:10

Ok.. So you have a few things going on.

Issues

Scoping: Move your scope a bit out. Since you need to use filterTerm it 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 include angular.js before angular-simple-logger.js
Use of $scope: You can use scope directly, you don't need to extend it, that just makes it harder to read.
Model structure: Your Markers elements are a level too deep, I make the Markers variable 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.

0人赞添加讨论(0) 举报

smile是对你的礼貌

5楼-- · 2019-06-21 11:14

the short answer is

Angular is not destroying array when you do filtering in both cases:

either in HTML

{{ arr | filter : filterTerm}}

or in JS:

newArray = $filter('filter')(arr, filterTerm);

it will be new array.

0人赞添加讨论(0) 举报

我想做一个坏孩纸

6楼-- · 2019-06-21 11:21

You need to copy the markers array using angular.copy

angular.extend($scope,{
  filteredMarkers:angular.copy($scope.markers)
 });

Write your customer filter to filter object instead of array

app.filter('markerFilter',function(){
   return function(input,filterBy){
     var markers = [];
     if(input && filterBy && input[filterBy]){
       markers.push(input[filterBy]);
       return markers;
     }
     return input;
   }
 })

Check out the plunker, write m1, m2, m3 in text-box and tab out. https://plnkr.co/edit/GI4gn5

0人赞添加讨论(0) 举报

爷、活的狠高调

7楼-- · 2019-06-21 11:21

When you apply an angular filter in your controller, it is a one-shot process. It seems that your use-case actually fits better to applying the filter within the view, like this:

{{ arr | filter : filterTerm}}

This will leave your model unchanged, but show only the filtered items in the view anyway. This fiddle shows the usage with an input field for the filterTerm.

0人赞添加讨论(0) 举报

1 2 下一页