CODEWITHSUNDEEP
angularjs
user2997454
user2997454

Reputation: 23

Applying GroupBy Filter in AngularJS View

I'm working on my first AngularJS project which is an example from Adam Freeman's book "Pro AngularJS". I'm trying to apply a groupBy filter in my view and I just can't seem to get it to work. Here is my view where you can see I'm just trying to group by name:

<div ng-controller="ordersCtrl">

<table class="table table-striped table-bordered">
    <tr><th>Name</th><th>City</th><th>Value</th><th></th></tr>
    <tr ng-repeat="order in orders">
        <td>{{order.name}}</td>
        <td>{{order.city}}</td>
        <td>{{calcTotal(order) | currency}}</td>
        <td>
            <button ng-click="selectOrder(order)" class="btn btn-xs btn-primary">
                Details
            </button>
        </td>
    </tr>
</table>

<div ng-show="selectedOrder">
    <h3>Order Details</h3>

    <table class="table table-striped table-bordered">
        <tr><th>Name</th><th>Count</th><th>Price</th></tr>
        <tr ng-repeat="item in selectedOrder.products | groupBy:['name']">
            <td>{{item.name}}</td>
            <td>{{item.count}}</td>
            <td>{{item.price | currency}} </td>
        </tr>
    </table>
</div>

I injected "$filter" into the "ordersCtrl" controller. When I do this I get "Unknown provider: groupByFilterProvider <- groupByFilter". The "ordersCtrl" controller is in the Angular module "sportsStoreAdmin". I don't understand what is required to get this to work properly. Any help is appreciated.

Thanks,

Pete

Upvotes: 0

Views: 2243

Answers (2)

Pete
Pete

Reputation: 113

Varun/Moncef Hassein-Bey . . thanks for responding . . . still missing something . . . Here are some more details . . .

So I'm trying to apply the groupBy filter in a div that is under the controller "ordersCtrl". The "ordersCtrl" controller is defined a module called "sportsStoreAdmin" which is orignally defined elsewhere.
The creation of the original "sportsStoreAdmin" module looks like this:

angular.module("sportsStoreAdmin", ["ngRoute", "ngResource"])

In the original "sportsStoreAdmin" I am referencing angular-filters.min.js in a script tag in the head section.

When I do this I'm still getting "Unknown provider: groupByFilterProvider <- groupByFilter"

So apparently I'm still missing something here.

Pete

Upvotes: 0

Varun
Varun

Reputation: 597

As mentioned by others

orderBy is available out of the box, but not groupBy.

Please include angular filter module

You can refer this.

Upvotes: 1

Related Questions