I am new to Angular and I'm trying to implement the `groupBy` filter from angular.filter but I'm having trouble including it in my project. I followed the first two steps outlined in the documentation at https://github.com/a8m/angular-filter#groupby, but I'm stuck on the third step which is adding 'angular.filter' to my main module's list of dependencies.
Below is the snippet of HTML where I am trying to utilize the filter:
<div>
<table style="border-collapse: collapse">
<thead>
<tr align="center" style="outline: thin solid black">
<th style="text-align: center">Review ID</th>
<th style="text-align: center">Reported Count</th>
<th style="text-align: center">Type of Review</th>
<th style="text-align: center">Link to review</th>
<th style="text-align: center">Expand/Collapse</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in data | groupBy: 'ResourceId'">
<tr>
<td>{{key}}</td>
<td>{{value.length}}</td>
<td>type goes here</td>
<td>view</td>
<td>expand</td>
</tr>
</tbody>
</table>
</div>
Error:
[$injector:unpr] Unknown provider: groupByFilterProvider <- groupByFilterMy JavaScript file looks like this:
var admin = angular.module('admin', ['ngRoute']);
var delayTimer;
admin.config([
'$routeProvider',
'$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/reported', {
templateUrl: 'view/reported_reviews.html',
controller: 'reportedController'
})
}
]);