Getting an Unknown Provider Error for using angular-filter groupBy in my Ionic App

Question

This is the code my html page:

<div ng-repeat="(key, value)  in list.arrayofStuff | orderBy: 'order' |  groupBy: 'code' ">

In the Index.html I've imported the angular-filter:

<script src="lib/angular-filter/dist/angular-filter.js"></script>

But for some reasong, I'm getting this error.

ionic.bundle.js:26794 Error: [$injector:unpr] Unknown provider: groupByFilterProvider <- groupByFilter

Do i have to inject the angular-filter into my controller as well? I'm using Ionic 1. Would appreciate any help. Thanks.

Answer 1

You will have to include the angular-filter module in your apps dependencies.

var myApp = angular.module('myApp', ['angular.filter']);

Source Here

Answer 2

In AngularJS you don't import filters by including a script tag to them. Check out this blog post or the AngularJS docs for setting up a custom filter.

When creating the filter you first get a reference to your app module, and then you can just use the .filter method off of it. Specifying your module name here is what "registers" your filter with AngularJS.

angular.module('MyAppModule')
.filter('filterName', function() {
  return function(input, uppercase) {
    return input;
  };
})

Then in your controller you can use the filter like so:

.controller('MyController', ['$scope', 'filterName', function($scope, filterName) {
  $scope.greeting = 'hello';
  $scope.filteredGreeting = filterName($scope.greeting);

}]);

or in html:

{{ expression | filter }}

It also sounds like you might be using an external module. If some other developer on your team (or not on your team) gave you a module and didn't use MyAppModule (or whatever your module's name is) then you will need to import that module. You can check the AngularJS docs on Modules for more info on this, but basically you declare the other dev's module in the array when you first create your project's module:

var app = angular.module("MyAppModule", ["otherDevsModule"]);