JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<div ng-app="LoopApp" ng-controller="LoopController">
  Enter breakpoint: <input type="text" ng-model="loopCount" ng-change="reArrange()"><br><br>
  <div class="float" ng-repeat="array in formattedArray">
    <div ng-repeat="value in array">
      <span>data {{value}}</span>
    </div>
    <br>
  </div>
</div>

CSS

.float {
  float: left;
  position: absoulte;
  margin: 10px;
}

JavaScript

// App declaration
var LoopApp = angular.module("LoopApp", []);
// App controller
LoopApp.controller("LoopController", ["$scope", "$filter", function($scope, $filter) {
  $scope.loopCount = 2;
  $scope.BookmarkList = [1, 2, 3, 4, 5, 6];
  $scope.reArrange = function(){
  	$scope.formattedArray = $filter('loopEvery')($scope.BookmarkList, $scope.loopCount);
  }
  $scope.reArrange();
}]);
// Loop every n items filter
LoopApp.filter("loopEvery", [function() {
  return function(mainArray, loopEvery) {
    var subArray = [],
      formattedArray = [];
    angular.forEach(mainArray, function(item, index) {
      subArray.push(item);
      if ((subArray.length == loopEvery) || (index == mainArray.length - 1)) {
        formattedArray.push(subArray);
        subArray = [];
      }
    });
    return formattedArray;
  }
}]);