AngularJS：每组ng-repeat中的“加载更多”按钮，包含许多组标题

Question

我想将Apertures Offset s Shape Inner Dia U/V Ellipse Param a/b/c/d 0 0.152 / 0.0415 0.076 / 0.02075 / 0.076 / 0.02075 0 0.152 / 0.0387 0.076 / 0.01935 / 0.076 / 0.01935 0 0.152 / 0.0387 0.076 / 0.01935 / 0.076 / 0.01935 按钮添加到每个组的底部，就像这里的图像一样，点击按钮后，它会显示相关组的其余部分

其中a，g是具有load more属性

的群组标题

在下面的代码段中，代码只返回一个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;
    };
}]);

Answer 1

请尝试此代码段

＆＃13;

＆＃13;

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;
  }
}]);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;