Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - Unknown provider: groupByFilterProvider <- groupByFilter

I have a array of object. I need to group the data by one field and show the result in an HTML table.

INPUT :

[
    {
        id: "559e2bbc9a496034557d6d84",
        text: "Data Sources",
        topParentId: "559e2bbc9a496034557d6d84",
        topParentText: "Data Sources"
    },
    {
        id: "559e2bbc9a496034557d6d83",
        text: "Applications",
        topParentId: "559e2bbc9a496034557d6d83",
        topParentText: "Applications"
    },
    {
        id: "559e2bbc9a496034557d6d82",
        text: "Analytics",
        topParentId: "559e2bbc9a496034557d6d83",
        topParentText: "Applications"
    }
]

From this I need to create an HTML table like this (grouping data by topParentId):

Group            |       Tags
Data Sources     |      Data Sources
Applications     |      Applications   Analytics

So far I have done this:

 <table class="table table-bordered">
              <thead>
              <tr>
                <th>Group</th>
                <th>Tags</th>
              </tr >
              </thead>
              <tbody>
              <tr ng-repeat="tag in topic.tags | groupBy: 'topParentId'">
                <td>{{tag.topParentText}}</td>
              </tr>
              <tr>
                <td>{{tag.text}}</td>
              </tr>
              </tbody>
            </table>

But after running this code, I am getting Unknown provider: groupByFilterProvider <- groupByFilter error.

I am using AngularJs 1.2

like image 517
SharpCoder Avatar asked Jul 10 '15 10:07

SharpCoder


People also ask

Why can't I do groupby with [angular] filter?

see, [angular.filter] is a dependency Injection, in which it is a seperate module (not part of Anjular js core ) , if you dont inject that then you wont be able to do groupBy. if it works, Please close this post by marking it as answer.

What are providers in AngularJS?

Providers Each web application you build is composed of objects that collaborate to get stuff done. These objects need to be instantiated and wired together for the app to work. In AngularJS apps most of these objects are instantiated and wired together automatically by the injector service.

How do I fix the unknown provider error in angular?

Since neither of these are declared, you will receive the "Unknown provider" error. To fix this, you should change all of the dependencies to strings: angular('myModule').service('myService', ['anotherService', function(anotherService) { // ...

What is provider injection in AngularJS?

This injection is done by a provider injector which is different from the regular instance injector, in that it instantiates and wires (injects) all provider instances only. During application bootstrap, before AngularJS goes off creating all services, it configures and instantiates all providers.


1 Answers

As mentionned by @jhadesdev orderBy is available out of the box, but not groupBy. It is included in angular-filter

like image 140
Abdellah Alaoui Avatar answered Sep 19 '22 01:09

Abdellah Alaoui