Selase Selase - 1 month ago 4
AngularJS Question

Nested ng-repeat with groupBy on Page Load or refresh in Angular

I got some help coming this far. I just need to go one step further to achieve what I'm about. I'd like to group data by an attribute which currently gets passed by an ng-click action. I wish to have this done on page load or refresh. How can i achieve this from the code below? DO advice if there's a better way to achieve what i'm about. Thanks.

<!doctype html>
<html ng-app="Demo" ng-controller="DemoController">
<head>
<meta charset="utf-8" />

<title>
Grouping Nested ngRepeat Lists In AngularJS
</title>
</head>
<body>

<h1>
Grouping Nested ngRepeat Lists In AngularJS
</h1>

<p>
Group by:
<a ng-click="groupBy( 'brandName' )">Brand Name</a> -
<a ng-click="groupBy( 'hair' )">Hair</a>
</p>

<!-- BEGIN: Outer ngRepeat. -->
<div class="col s12" ng-repeat="group in groups" >
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<a href="#">
<img ng-src="{{group.brandLogo}}" alt="" class="circle responsive-img activator card-profile-image2" onerror="this.src='../../assets/images/backgrounds/cj_avatar.jpg'">
</a>

<p>Brand Name: {{ group.label }}</p>
</div>
<div class="collapsible-body" ng-repeat="camp in group.camps">
<ul class="collection">
<li class="collection-item">
<div class="row">
<div class="col s4 m2 center-align">
{{camp.campID}}
</div>
<div class="col s4 m3 center-align">
<b>{{camp.campName}}</b>
</div>
<div class="col s4 m2 center-align">
{{camp.campBudget}}
</div>
<div class="col s4 m1 center-align">
{{camp.campHits}}
</div>
<div class="col s4 m2 center-align">
{{camp.campDuration}}
</div>
<div class="col s4 m2 right-align">
<i class="material-icons ">insert_chart</i>
<i class="material-icons">content_copy</i>
<i class="material-icons ">delete_forever</i>
<i class="material-icons">more_vert</i>
</div>
</div>
</li>

</ul>
</div>
</li>

</ul>
</div>
<!-- END: Outer ngRepeat. -->



<!-- Load jQuery and AngularJS from the CDN. -->
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.min.js">
</script>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>

<!-- Load the app module and its classes. -->
<script type="text/javascript">
// Define our AngularJS application module.
var demo = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I am the main controller for the application.
demo.controller(
"DemoController",
function( $scope, $timeout ) {
// -- Define Controller Methods. ------------ //
// I sort the given collection on the given property.
function sortOn( collection, brandName ) {
collection.sort(
function( a, b ) {
if ( a[ brandName ] <= b[ brandName ] ) {
return( -1 );
}
return( 1 );
}
);
}
// -- Define Scope Methods. ----------------- //
// I group the friends list on the given property.
$scope.groupBy = function( attribute ) {
// First, reset the groups.
$scope.groups = [];
// Now, sort the collection of friend on the
// grouping-property. This just makes it easier
// to split the collection.
sortOn( $scope.camps, attribute );
// I determine which group we are currently in.
var groupValue = "_INVALID_GROUP_VALUE_";
// As we loop over each friend, add it to the
// current group - we'll create a NEW group every
// time we come across a new attribute value.
for ( var i = 0 ; i < $scope.camps.length ; i++ ) {
var camp = $scope.camps[ i ];
// Should we create a new group?
if ( camp[ attribute ] !== groupValue ) {
var group = {
label: camp[ attribute ],
camps: []
};
groupValue = group.label;
$scope.groups.push( group );
}
// Add the friend to the currently active
// grouping.
group.camps.push( camp );
}
};
// -- Define Scope Variables. --------------- //
// I am the raw collection of friends.
$scope.camps = [
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:032145, campName:"Y3 Twi Kor", campBudget:500, campHits:"7k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:639885, campName:"X Bundle", campBudget:900, campHits:"6.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:857745, campName:"One Ghana", campBudget:1000, campHits:"9k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:795554, campName:"Free Bonto", campBudget:1500, campHits:"8.1k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:722957, campName:"Anajo Y3 D3", campBudget:650, campHits:"1.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:769855, campName:"Y3n Ko Nkoa", campBudget:780, campHits:"6.4k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:742896, campName:"Drink for life", campBudget:7000, campHits:"3.8k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:087759, campName:"Pure as Spirit", campBudget:910, campHits:"1.7k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:085997, campName:" Nourish your thirst", campBudget:1200, campHits:"9.2k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:398745, campName:"Fountain of life", campBudget:9800, campHits:"8.5k", campDuration:"15 Days", campDesc:""},
{brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:297556, campName:" Spring of Youth", campBudget:250, campHits:"4k", campDuration:"15 Days", campDesc:""}

];
// I am the grouped collection. Each one of these
// will contain a sub-collection of friends.
$scope.groups = [];
}
);
</script>

</body>
</html>

Answer

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="Demo" ng-controller="DemoController">
<head>
    <meta charset="utf-8" />

    <title>
        Grouping Nested ngRepeat Lists In AngularJS
    </title>
</head>
<body>

    <h1>
        Grouping Nested ngRepeat Lists In AngularJS
    </h1>

    <p>
        Group by:
        <a ng-click="groupBy( 'brandName' )">Brand Name</a> -
        <a ng-click="groupBy( 'hair' )">Hair</a>
    </p>

    <!-- BEGIN: Outer ngRepeat. -->
    <div class="col s12" ng-repeat="group in groups" >
                                <ul class="collapsible popout" data-collapsible="accordion">
    <li>
      <div class="collapsible-header">
      <a href="#">
                                <img ng-src="{{group.brandLogo}}" alt="" class="circle responsive-img activator card-profile-image2" onerror="this.src='../../assets/images/backgrounds/cj_avatar.jpg'">
                            </a>

      <p>Brand Name: {{ group.label }}</p>
      </div>
      <div class="collapsible-body" ng-repeat="camp in group.camps">
      <ul class="collection">
      <li class="collection-item">
      <div class="row">
        <div class="col s4 m2 center-align">
        {{camp.campID}}
        </div>
        <div class="col s4 m3 center-align">
            <b>{{camp.campName}}</b>
        </div>
        <div class="col s4 m2 center-align">
            {{camp.campBudget}}
        </div>
        <div class="col s4 m1 center-align">
            {{camp.campHits}}
        </div>
        <div class="col s4 m2 center-align">
            {{camp.campDuration}}
        </div>
        <div class="col s4 m2 right-align">
            <i class="material-icons ">insert_chart</i>
            <i class="material-icons">content_copy</i>
            <i class="material-icons ">delete_forever</i>
            <i class="material-icons">more_vert</i>
        </div>
      </div>
      </li>

    </ul>
      </div>
    </li>

  </ul>
                                </div>
    <!-- END: Outer ngRepeat. -->



    <!-- Load jQuery and AngularJS from the CDN. -->
    <script
        type="text/javascript"
        src="//code.jquery.com/jquery-1.9.1.min.js">
    </script>
    <script
        type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
    </script>

    <!-- Load the app module and its classes. -->
    <script type="text/javascript">
        // Define our AngularJS application module.
        var demo = angular.module( "Demo", [] );
        // -------------------------------------------------- //
        // -------------------------------------------------- //
        // I am the main controller for the application.
        demo.controller(
            "DemoController",
            function( $scope, $timeout ) {
                // -- Define Controller Methods. ------------ //
                // I sort the given collection on the given property.
                function sortOn( collection, brandName ) {
                    collection.sort(
                        function( a, b ) {
                            if ( a[ brandName ] <= b[ brandName ] ) {
                                return( -1 );
                            }
                            return( 1 );
                        }
                    );
                }
                // -- Define Scope Methods. ----------------- //
                // I group the friends list on the given property.
               
                $scope.groupBy = function( attribute ) {
                    // First, reset the groups.
                    $scope.groups = [];
                    // Now, sort the collection of friend on the
                    // grouping-property. This just makes it easier
                    // to split the collection.
                    sortOn( $scope.camps, attribute );
                    // I determine which group we are currently in.
                    var groupValue = "_INVALID_GROUP_VALUE_";
                    // As we loop over each friend, add it to the
                    // current group - we'll create a NEW group ever

                    // time we come across a new attribute value.
                    for ( var i = 0 ; i < $scope.camps.length ; i++ ) {
                        var camp = $scope.camps[ i ];
                        // Should we create a new group?
                        if ( camp[ attribute ] !== groupValue ) {
                            var group = {
                                label: camp[ attribute ],
                                camps: []
                            };
                            groupValue = group.label;
                            $scope.groups.push( group );
                        }
                        // Add the friend to the currently active
                        // grouping.
                        group.camps.push( camp );
                    }
                };
              
                // -- Define Scope Variables. --------------- //
                // I am the raw collection of friends.
                $scope.camps = [
                    {brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:032145, campName:"Y3 Twi Kor", campBudget:500, campHits:"7k", campDuration:"15 Days", campDesc:""},
                    {brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:639885, campName:"X Bundle", campBudget:900, campHits:"6.2k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/vodafone.jpg", brandName:"Vodafone", campID:857745, campName:"One Ghana", campBudget:1000, campHits:"9k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:795554, campName:"Free Bonto", campBudget:1500, campHits:"8.1k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:722957, campName:"Anajo Y3 D3", campBudget:650, campHits:"1.2k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/mtn.jpg", brandName:"MTN", campID:769855, campName:"Y3n Ko Nkoa", campBudget:780, campHits:"6.4k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:742896, campName:"Drink for life", campBudget:7000, campHits:"3.8k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:087759, campName:"Pure as Spirit", campBudget:910, campHits:"1.7k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:085997, campName:" Nourish your thirst", campBudget:1200, campHits:"9.2k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:398745, campName:"Fountain of life", campBudget:9800, campHits:"8.5k", campDuration:"15 Days", campDesc:""},
    {brandLogo:"../../assets/images/brands/voltic.jpg", brandName:"Voltic", campID:297556, campName:" Spring of Youth", campBudget:250, campHits:"4k", campDuration:"15 Days", campDesc:""}

                ];
                // I am the grouped collection. Each one of these
                // will contain a sub-collection of friends.
                $scope.groups = [];
               $scope.groupBy('brandName');
            }
        );
    </script>

</body>
</html>

It's quite simple actually. You just need to invoke your

$scope.groupBy('brandName')

Somewhere in your controller.

Another cleaner approach would be(if you're planning to scale), use the resolve method in ngRouter or uiRouter resolve your data and preformat it before loading the page.

Comments