CODEWITHSUNDEEP
angularjs
thebenedict
thebenedict

Reputation: 2589

Using a filterService in a controller

I'm working on some Angular 1.1.5 code about a year old. I have a filterService that I'm using in a template but want to move into the controller.

Service:

myapp.factory('filterService', ['$rootScope', function ($rootScope) {
  var model = {
    // ...
    },
  }

  var service = {
    characteristic: function(target) {
      if (model.characteristicsChecked["checkedCount"] == 0) {
        return true;
      }
      else {
        var passesFilter = false;
        angular.forEach(target.characteristics, function(char) {
          passesFilter = passesFilter || model.characteristicsChecked[char.slug];
        });
        return passesFilter;
      }
    },
    //...
  }
  service.model = model;
  return service;
}]);

Each element in myCollection has an array of characteristics, and characteristicsChecked is bound to checkboxes in the template. This works in the template like:

{{ $parent.prefiltered = (myCollection | filter:characteristic) }}

but the app has a lot of similar filters and the data rarely changes, so it's too slow to run them with every digest cycle. How can I use the characteristic filter on $scope.myCollection in a controller?

Edit

I've tried this:

$filter('filter')($scope.myCollection, filterService.characteristic);

But get the following error that I don't understand well:

TypeError: object is not a function
    at new <anonymous> (http://localhost:3000/assets/app/controllers/filters.js?body=1:24:33)
    at invoke (http://localhost:3000/assets/unstable/angular.js?body=1:2932:28)
    at Object.instantiate (http://localhost:3000/assets/unstable/angular.js?body=1:2944:23)
    at http://localhost:3000/assets/unstable/angular.js?body=1:5369:28
    at c (http://localhost:3000/assets/angular-ui-router.min.js?body=1:8:7666)
    at u.link (http://localhost:3000/assets/angular-ui-router.min.js?body=1:8:8049)
    at nodeLinkFn (http://localhost:3000/assets/unstable/angular.js?body=1:4960:13)
    at compositeLinkFn (http://localhost:3000/assets/unstable/angular.js?body=1:4551:15)
    at compositeLinkFn (http://localhost:3000/assets/unstable/angular.js?body=1:4554:13)
    at publicLinkFn (http://localhost:3000/assets/unstable/angular.js?body=1:4456:30) <div class="span3" ui-view="filters">

Upvotes: 0

Views: 102

Answers (2)

sylwester
sylwester

Reputation: 16498

Please see documention here https://docs.angularjs.org/guide/filter

app.controller('someCtrl', function($scope,filterFilter,filterService){   

 $scope.myCollection =  [...];

  $scope.prefiltered  = filterFilter($scope.myCollection,filterService.characteristic)

});

Upvotes: 1

bmleite
bmleite

Reputation: 26880

Add the $filter service as dependency to your controller and then use it like this:

$filter('filter')($scope.myCollection, filterService.characteristic);

(Note that the filterService must also be added as dependency)

Upvotes: 1

Related Questions