AngularJS: кнопка `Load more` в каждой группе ng-repeat с заголовками многих групп

0

Я хочу добавить кнопку load more в нижней части каждой группы, как здесь, и после нажатия кнопки она показывает остальную часть соответствующей группы Изображение 174551

где a, g - названия групп, у которых есть свойство group

В нижеприведенном фрагменте кода возвращается только одна кнопка load more и без учета свойства group.

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>
  • 0
    Проверьте мой фрагмент
  • 0
    Отметьте @MohitTanwani ответ правильно, если это соответствует вашим целям.
Показать ещё 1 комментарий
Теги:

1 ответ

2
Лучший ответ

Попробуйте этот фрагмент

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>
Поделиться
  • 0
    У вас есть идеи о том, как скрыть кнопку « load more , если больше нет данных для загрузки? спасибо @MohitTanwani
  • 0
    @HalaElBarchah: я отредактировал мой код, пожалуйста, проверьте сейчас.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню