Hala El Barchah Hala El Barchah - 3 months ago 17
AngularJS Question

AngularJS : `Load more` button in each group of ng-repeat with many groups titles

I want to add

load more
button to the bottom of each group like the image here, and after clicking the button it shows rest of parts of the relevant group
enter image description here

where a,g are groups titles those have
group
property

In the snippet bellow, the code return only one
load more
button, and with no consideration of the
group
property.



var myApp = angular.module('myApp',[]);

myApp.controller('main', ['$scope', function($scope) {
$scope.test = "test";
$scope.filteredModules = [
{
"name":"a",
"group":"a"
},
{
"name":"b",
},
{
"name":"c",
},
{
"name":"c",
},
{
"name":"e",
},
{
"name":"f",
},
{
"name":"g",
"group":"g"
}
,{
"name":"h",
},
{
"name":"i",
},
{
"name":"j",
},
{
"name":"k",
}
,
{
"name":"l",
}
];
$scope.limit = 4;
$scope.loadMore = function() {
var increamented = $scope.limit + 4;
$scope.limit = increamented > $scope.filteredModules.length ? $scope.filteredModules.length : increamented;
};
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="main">
<div ng-repeat="node in filteredModules | limitTo:limit track by $index">
<div ng-if="!node.group">{{node.name}}</div>
<div ng-if="node.group" style="background-color:red">{{node.name}} </div>
</div>
<button ng-click="loadMore()">Load more</button>
</div>
</div>




Answer

Please try this snippet

var myApp = angular.module('myApp',[]);

myApp.controller('main', ['$scope', function($scope) {
$scope.filteredModules = { 
    "groups":
        [
            {
              "title": "Alfreds Futterkiste",
              "childs": ["child-1", "child-2", "child-3", "child-4", "child-5", "child-6"],
              "limit": "3"
            },
            {
              "title": "Ana Trujillo Emparedados y helados",
              "childs": ["child-1", "child-2", "child-3", "child-4", "child-5", "child-6"],
              "limit": "4"
            },
            {
              "title": "Antonio Moreno Taquería",
              "childs": ["child-1", "child-2", "child-3", "child-4", "child-5", "child-6"],
              "limit": "3"
            }
        ]
    };

$scope.loadMore = function(index) {         
     $scope.filteredModules.groups[index].limit += 3;
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="main">
<div ng-repeat="node in filteredModules.groups track by $index">
    <div ng-if="node.title" style="background-color:red">{{node.title}}
      
    </div>
      <div ng-repeat="child in node.childs | limitTo: node.limit">
        {{child}}
      </div>
      <br/>
      <button ng-click="loadMore($index)">Load more</button>
<br/><br/>
</div>

</div>
</div>