How to filter angular model (array) without destro

Question

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.

Answer 1

You could do something like I've done in a plunker forked from yours. Create a factory where you keep your marker objects, return them to the controller as called, and then filter them according to the filterTerm(which wasn't within the scope of your controller in your original plunker, btw).

app.factory('myMarkers', function() {

    var markers = {
        m1: {
            lat: 51.505,
            lng: -0.09,
            data: 'a'
        },
        m2: {
            lat: 51,
            lng: 0,
            data: 'ab'
        },
        m3: {
            lat: 51,
            lng: 0.1,
            data: 'abc'
        },
        m4: {
            lat: 51,
            lng: 0.14,
            data: 'abcd'
        }
    };

    function filterMarkersBy(term) {
        return _.filter(markers, function(marker) {
          return marker.data.indexOf(term) > -1;
        });
    }

    return {
        markers: markers,
        filterMarkersBy: filterMarkersBy
    }
});

And then in your controller, you can initialize the map by putting all the markers on $scope (with angular.extend($scope, { markers: myMarkers.markers });), and then watch the value of your $scope.filterTerm to filter the $scope.markers object accordingly.

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

$scope.filterTerm;

$scope.$watch(function() { return $scope.filterTerm; }, function(newVal) {
    if (newVal) {
      console.log(newVal);
        $scope.markers = myMarkers.filterMarkersBy(newVal);
    }
});

Now it filters on the fly and adds the markers back as you reduce the filter term. Note that I'm using lodash's _.filter() method to filter in the factory, but you've probably already got lodash as a dependency anyway.

Answer 2

One way to filter in angularjs view

<input type="text" ng-model="filterBy"><!-- this is filter option -->
<div ng-repeat="row in rows| filter: {filterName : filterBy}">

Or you can also try in controller something like this

$scope.filtered = $filter('filter')($scope.results, filterTerm)[0];

Answer 3

I don't know that there is an easy built-in 'angular' way to approach this. Here is how I would handle filtering a list by multiple filters. I would keep an array of filters, and then anytime any of those filters changed, regenerate the list of results based on ALL of the filters.

Take a look at this snippet and see if it does what you are looking for.

angular.module('app', [])
  .controller('MyController', function($filter) {
    var vm = this;
    vm.markers = [{
      lat: 51.505,
      lng: -0.09,
      data: 'a'
    }, {
      lat: 51,
      lng: 0,
      data: 'ab'
    }, {
      lat: 51,
      lng: 0.1,
      data: 'abc'
    }, {
      lat: 51,
      lng: 0.14,
      data: 'abcd'
    }];

    //list of all terms to filter the data by
    vm.filterTerms = [];

    //start out with an unfiltered list of markers
    vm.filteredMarkers = vm.markers;

    vm.addFilterTerm = function(term) {
      vm.filterTerms.push(term);
      vm.filterMarkers();
    };

    /**
     * Takes the source array, and applies every filter to it and saves it to the filtered array
     */
    vm.filterMarkers = function() {
      //start with the original data
      var result = vm.markers;
      for (var i in vm.filterTerms) {
        //get the current term
        var filterTerm = vm.filterTerms[i];
        //filter the results by the current filter term
        result = $filter('filter')(result, filterTerm);
      }
      vm.filteredMarkers = result;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as vm">
    <input type="text" ng-model="vm.currentFilterTerm" />
    <button ng-click="vm.addFilterTerm(vm.currentFilterTerm);">Add to filter</button>
    <h1>Filters</h1>
    <ul>
      <li ng-repeat="term in vm.filterTerms">{{term}}</li>
    </ul>
    <h1>Markers</h1>
    <ul>
      <li ng-repeat="marker in vm.filteredMarkers">{{marker}}</li>
    </ul>
  </div>
</div>

Answer 4

Use $watch('searchTerm') to filter on change and transform the markers Object to array before apply $filter.

  $scope.filteredMarkers=$scope.markers;          
  $scope.$watch("filterTerm",function(filterTerm){
        $scope.arr=Object.keys($scope.markers).map(function(key) {
          return $scope.markers[key];
        });
        $scope.filteredMarkers=filterTerm ? $filter('filter')($scope.arr, {'data':filterTerm}) : $scope.markers;
    });

Finally use the filteredMarkers on directive:

<leaflet defaults="defaults" markers="filteredMarkers" height="480px" width="640px"></leaflet>

See updated plunker: https://plnkr.co/edit/P5bNzHmZ2CRjImbMztyr?p=preview

Answer 5

The problem is that you are trying to filter an object instead an array.

Try to build your own custom filer:

app.filter('myObjectFilter', function() {
  return function(input, search) {
    var result = {};
    for (var key in input) {
      if (input.hasOwnProperty(key)) {
        if (input[key].data.toLowerCase().indexOf(search.toLowerCase()) > -1) {
          result[key] = input[key];
        }
      }
    }
    return result;
  }
});

see:https://plnkr.co/edit/Gi4gWHne57owB44MTsAB?p=preview