How to use nested loops in AngularJS

Question

I have a list Reviews and I need to bind it with html in such a way that div with class item can have maximum 3 child divs and after that it should create a new div with class item which also can have maximum 3 divs and so on.

I have tried below code but not working :

 <div class="item" ng-repeat="_list in Reviews"  ng-if="$index % 3 == 0">    
       <div class="col-md-4 col-sm-6" ng-repeat="_list in Reviews" ng-if="$index < 3">
          <p>   {{_list.Comment}}</p>
       </div>
 </div>

Edit : Its creating div with class item having 3 children divs and then create new div with class item and again same 3 children divs.

Example Reviews has 4 elements : A,B,C,D Supposed Output :

 <div class="item">    
           <div class="col-md-4 col-sm-6">
              <p>  A</p>
              <p>  B</p>
              <p>  C</p>
           </div>
     </div>

    <div class="item">    
           <div class="col-md-4 col-sm-6">
              <p>  D</p>
           </div>
     </div>

And it giving below output :

<div class="item">    
               <div class="col-md-4 col-sm-6">
                  <p>  A</p>
                  <p>  B</p>
                  <p>  C</p>
               </div>
         </div>

        <div class="item">    
               <div class="col-md-4 col-sm-6">
                  <p>  A</p>
                  <p>  B</p>
                  <p>  C</p>
               </div>
         </div>

Provide example of input(Reviews) and expected output(HTML) — Slava Utesinov
– Slava Utesinov, Commented Aug 2, 2018 at 11:08
Use your controller to help the view. Create an array of groups of reviews (where each group is an array of max. 3 reviews) in your controller, and iterate over the groups in your view. For each group, iterate over the max 3 reviews it contains. — JB Nizet
– JB Nizet, Commented Aug 2, 2018 at 11:10
Note, however, that on small devices, since you're using col-sm-6, that won't look nice at all. Why don't you just use a single loop, since bootstrap will go on the next line for you, using CSS, after 3 elements. — JB Nizet
– JB Nizet, Commented Aug 2, 2018 at 11:13

Satpal · Accepted Answer · 2018-08-02 11:32:02Z

You can chunk array in groups and then iterate them.

angular.module('myApp', [])
  .controller('Controller', ['$scope',
    function($scope) {
      var reviews = [{
        "Comment": "a"
      }, {
        "Comment": "b"
      }, {
        "Comment": "c"
      }, {
        "Comment": "d"
      }, {
        "Comment": "e"
      }, {
        "Comment": "f"
      }];

      function chunkArrayInGroups(arr, size) {
        var myArray = [];
        for (var i = 0; i < arr.length; i += size) {
          myArray.push(arr.slice(i, i + size));
        }
        return myArray;
      }

      $scope.reviews = chunkArrayInGroups(reviews, 3);
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">
    <div class="item" ng-repeat="chunks in reviews">
      <div class="col-md-4 col-sm-6" >
        <p ng-repeat="_list in chunks"> {{_list.Comment}}</p>
      </div>
    </div>
  </div>
</div>

Slava Utesinov · Accepted Answer · 2018-08-02 12:26:42Z

You can do it via HTML only:

angular.module('myApp', []).controller('Controller', ['$scope', function($scope) {
    $scope.reviews = [
      { "Comment": "a" }, 
      { "Comment": "b" },
      { "Comment": "c" },
      { "Comment": "d" },
      { "Comment": "e" },
      { "Comment": "f" },
      { "Comment": "g" }
    ];
}]);

.item{
  background-color: #66bfff;
}
p{
  margin:5px;
  background-color: #c2def3;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="Controller">    
    <div class="item" ng-repeat='item in reviews' ng-if='$index <= reviews.length / 3 - (reviews.length / 3 == 0 ? 1 : 0)' ng-init='$parentIndex = $index'>        
       <div class="col-md-4 col-sm-6">
          <p ng-repeat='item in reviews' ng-if='($index >= $parentIndex * 3) && ($index <= $parentIndex * 3 + 2)'>{{item.Comment}}</p>
       </div>
     </div>
  </div>
</div>

Collectives™ on Stack Overflow

How to use nested loops in AngularJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related