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

Question

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

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 1

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","child-7", "child-8", "child-9"],
              "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 = parseInt($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)" ng-hide="node.limit >= node.childs.length">Load more</button>
<br/><br/>
</div>

</div>
</div>