Filtering by value in array in object

Question

Filtering by value in array in object

Let's say I have an array of objects, something like:

$scope.data = [{name: 'foo name', value: 'foo value', spots: ['s1', 's2', 's3']},
               {name: 'foo name 2', value: 'foo value 2', spots: ['s1', 's2', 's3', 's4'}];

I want to filter this data with respect to the value of the current "spot", that is selected by the user. I know I could just write something like:

<div ng-repeat="subItem in data | filter: 's' + currentSpot">
      // Some content
</div>

But in the real case the data in each item is much more complex and thus causes a delay when the DOM is updated. I would thus like to filter only by the 'spots' field. I've searched around but didn't find any good solution that optimizes this problem.

javascript
angularjs
ionic-framework
ionic

Answer 1

As of Angular 1.1.3 or newer, you can do something like this

<input type="text" ng-model="search">
<div ng-repeat="item in data | filter: {'spots': search}">
   //something
</div>

Where 'spots' is the key from item in data, on which you want to search.

See this fiddle: http://jsfiddle.net/0Lftnfqc/

Answer 2

You could do something like this:

filter: function (value) {
                var deferred = $q.defer();
                var matches = $scope.data.filter(function (datarow) {
                    if (value== "" || value== null) return false;
                    else if (datarow.spots.toLowerCase().indexOf(value.toLowerCase()) != -1) return true;
                });
                $timeout(function () {
                    deferred.resolve(matches);
                }, 100);
                return deferred.promise;
            }

Really fast copy paste so you have to adapt it to your own situation. I suggest using 2 arrays, the full one and the filtered one you then reference in your ng-repeat.