CODEWITHSUNDEEP
javascriptangularjs
Devesh Agrawal
Devesh Agrawal

Reputation: 9212

How to group all product of single brand together - angular JS

Please see this JS fiddle link.

http://jsfiddle.net/4Dpzj/174/

This is the logic for group by

app.filter('groupBy', ['$parse', function ($parse) {
return function (list, group_by) {

    var filtered = [];
    var prev_item = null;
    var group_changed = false;
    // this is a new field which is added to each item where we append "_CHANGED"
    // to indicate a field change in the list
    //was var new_field = group_by + '_CHANGED'; - JB 12/17/2013
    var new_field = 'group_by_CHANGED';

    // loop through each item in the list
    angular.forEach(list, function (item) {

        group_changed = false;

        // if not the first item
        if (prev_item !== null) {

            // check if any of the group by field changed

            //force group_by into Array
            group_by = angular.isArray(group_by) ? group_by : [group_by]; 

            //check each group by parameter
            for (var i = 0, len = group_by.length; i < len; i++) {
                if ($parse(group_by[i])(prev_item) !== $parse(group_by[i])(item)) {
                    group_changed = true;
                }
            }


        }// otherwise we have the first item in the list which is new
        else {
            group_changed = true;
        }

        // if the group changed, then add a new field to the item
        // to indicate this
        if (group_changed) {
            item[new_field] = true;
        } else {
            item[new_field] = false;
        }

        filtered.push(item);
        prev_item = item;

    });

    return filtered;
};

I want to group all the products together.

what changes i need to do ?

Upvotes: 0

Views: 93

Answers (2)

Okazari
Okazari

Reputation: 4597

I come up with this in my mind. Without using any custom filters.

I simply use this ng-repeat syntax :

ng-repeat="(key,item) in MyList  | orderBy:orderKey"

Thanks to it i can get the key to compare the value with the previous object.

Here is my ng-show attribute. It can be improved by sorting the list somewhere else (like in the controller)

<h2 ng-show="(MyList | orderBy:orderKey)[key-1][orderKey] !== (MyList  | orderBy:orderKey)[key][orderKey]"

Thanks to this you can populate your var "orderKey" with any of your attribute name and this will works.

See it working in this JSFiddle

Hope it helped.

EDIT :

I think it would be a bit cleaner to use a temporary list to manage the visual order (see it in this JSFiddle):

JS : 

$scope.orderList = function(){
       $scope.orderedList = $filter('orderBy')($scope.MyList,$scope.orderKey);
}

HTML :

ng-change="orderList()" To trigger the list sort

The cleaner ng-repeat / ng-show

    <div ng-repeat="(key,item) in orderedList">
        <h2 ng-show="orderedList[key-1][orderKey] !== orderedList[key][orderKey]">{{item[orderKey]}} </h2>
        <ul>
            <li>{{item.ProductName}}</li>
        </ul>
    </div>

Upvotes: 1

Ayush
Ayush

Reputation: 311

Have a look at this: http://jsfiddle.net/4Dpzj/176/

<div ng-repeat="item in MyList  | orderBy:['SubCategoryName','BrandName'] | groupBy:['SubCategoryName']" >
    <h2 ng-show="item.group_by_CHANGED">{{item.SubCategoryName}} </h2>
    <ul>
        <li>{{item.ProductName}} --- {{item.BrandName}}</li>
    </ul>
</div>

Upvotes: 1

Related Questions