Comment afficher / masquer plusieurs éléments dans JS angulaire

J'ai un compte minimum qui détermine le nombre d'éléments à charger sur la page. Je pourrais avoir plusieurs listes dans mon dom, en fonction de l'objet json dont j'ai besoin pour satisfaire les conditions ci-dessous.

La fonctionnalité devrait fonctionner en fonction de la valeur minimale définie. Cette valeur est dynamique et ne sait pas quelle sera la valeur exacte. En fonction de cette valeur, la liste des éléments à afficher doit être affichée.

Attente de la sortie:

1. Si la liste 1 compte le nombre supérieur au nombre minimal, affichez uniquement les éléments de la liste 1 et cachez les autres et affichez l'autre uniquement sur le clic de montrer plus.

   • Comment envoyer JSON à Struts2 Action avec le formulaire AngularJS?
   • Erreur: Taille maximale de la pile d'appel dépassée sur Angualr Ui Router État Changement
   • Comment former la chaîne de requête dans l'URL de l'adresse Web dans le routeur d'état angulaire en utilisant la méthode state go
   • Retourner une promesse qui promet de lancer une erreur
   • Utilisation de la chaîne vide ("") comme nom de l'application ng

2. Si la liste 1 compte le nombre inférieur au nombre minimum, affichez les éléments de la liste 1 avec les éléments de la liste 2 jusqu'à ce qu'ils correspondent au nombre minimal et que le reste reste affiché et affiche le reste de la liste 2 éléments uniquement en cliquant sur Afficher plus de bouton.

3. Si tous les éléments de liste sont inférieurs au nombre minimum, alors ne s'affiche pas pour afficher plus de bouton.

C'est ce qui a essayé:

HTML:

<div ng-controller="myCtrl"> <ul class="list1" ng-if="listItems.list1.length>0"> <li ng-repeat="item in listItems.list1 | limitTo:limit1"> <div> {{item.text}} </div> </li> </ul> <ul class="list2"> <li ng-repeat="item in listItems.list2 | limitTo:limit2"> <div> {{item.text}} </div> </li> </ul> <ul class="list3"> <li ng-repeat="item in listItems.list3 | limitTo:limit3"> <div> {{item.text}} </div> </li> </ul> <button ng-click="showAll()" ng-if="listItems.totalCount > listItems.minCount"> Show all </button> 

JS:

 var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.listItems = {"list1":[{"text":"list 1"}],"list2":[{"text":"list 2"},{"text":"list 2"}],"list3":[{"text":"list 3"}],"list1Count":1,"list2Count":2,"list3Count":1,"totalCount":4, "minCount": 3}; $scope.firstLimit = $scope.listItems.list1Count >= $scope.listItems.minCount ? true: false; $scope.limit1 = 0; $scope.limit2 = 0; $scope.limit3 = 0; $scope.setLimit = function(){ if(($scope.listItems.list1Count == 0) && ($scope.listItems.list2Count>=$scope.listItems.minCount)){ $scope.limit2 = $scope.listItems.minCount; } else if(($scope.listItems.list1Count ==0) && ($scope.listItems.list2Count == 0) && $scope.listItems.list3Count > 0){ $scope.limit3 = $scope.listItems.minCount; } else if(($scope.listItems.list1Count && $scope.listItems.list2Count) <= $scope.listItems.minCount){ if(($scope.listItems.list1Count + $scope.listItems.list2Count) == $scope.listItems.minCount){ $scope.limit1 = $scope.listItems.list1Count; $scope.limit2 = $scope.listItems.list2Count; } else{ $scope.limit1 = $scope.listItems.list1Count; if($scope.limit1 == 0){ $scope.limit2 = $scope.listItems.list2Count; } else{ $scope.limit2 = $scope.listItems.minCount - $scope.listItems.list1Count; } $scope.limit3 = $scope.listItems.minCount-$scope.limit2; } } }; if($scope.firstLimit){ $scope.limit1 = $scope.listItems.minCount; } else{ $scope.setLimit(); } }); 

CSS:

 .list1{ background: red; } .list2{ background : green; } .list3{ background: yellow; } 

JS Fiddle

• AngularJS: classe ng conditionnelle avec une fonction déclenchant des quantités ridicules
• Obtenez toutes les vidéos YouTube dans une liste de lecture en utilisant JL angulaire
• Correction de l'erreur AngularJS: le fournisseur doit renvoyer la valeur à partir de la méthode $ get factory
• Nouvelle Date () retourne un jour avant la date dans la chaîne de l'heure en javascript
• J'essaie d'obtenir des validations de formulaire pour travailler avec un Assistant Angulaire