Populating divs downward while retaining equal length using bootstrap

Question

Currently I have a list which I populate using ng-repeat and use columns of width 6. However, the data I'm iterating through is alphabetically sorted and I'd like the list to populate alphabetically going downwards, while still retaining the aesthetic of having two evenly-stacked columns. Is this able to be done using bootstrap without data preprocessing?

For example, in the example above, it is alphabetical left to right and top down. I'd like it to be alphabetical going downwards, and the second column continues on from the first column with the last half of the data.

Here is some stripped down code:

<div class="col-md-12 col-sm-12 col-xs-12" ng-repeat="topLayerObject in objectArray | findParentLevelObjects">
 <div class="col-md-12 col-sm-12 col-xs-12">
  <button type="button" class = "btn btn-primary btn-block">{{topLayerObject.name}}</button>
 </div>
 <div style="padding-left:5px">
  <div class="col-md-6 col-sm-6 col-xs-6 lowPadding" ng-repeat="questionObj in objectArray | findChildLevelObjects">
   <label ng-if="!requiresInput(questionObj)">
     <input type="checkbox">{{questionObj.name}}
   </label>
  </div>
 </div>
</div>

Edit: To be clear, every object is in the same flattened array so children and parents are not separated from each other nor are they logically grouped. That's why a vertical population is so attractive to me - I would have to add additional data structures or loop over the data several times to deal with processing these nested columns just to count them. Is there some kind of flexbox which can keep items at an even level but stretch vertically as needed?

Answer 1

Repeat your list twice but limit which items are displayed in each using limitTo. Use HTML/CSS for making the lists side-by-side. I've used 2 Bootstrap columns in the snippet below.

You can work out how many items should be in the left column using Math.ceil(items.length / 2); If you have an even number of items it will split evenly otherwise it will round up so there is 1 more item in the left list.

1st column:

<div ng-repeat="item in items | limitTo : breakpoint">

2nd column (negative limitTo will start from the end of the list):

<div ng-repeat="item in items | limitTo : breakpoint - items.length">

var app = angular.module("app", []);

app.controller("controller", function($scope) {
  $scope.objectArray = [{
      name: "Odd number of items",
      items: ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
    },
    {
      name: "Even number of items",
      items: ["A", "B", "C", "D", "E", "F"]
    }
  ];

  // Calculate where to break the list in 2. If you know the length of your list isn't going to change I would change this to a variable instead of calling the function twice each digest cycle
  $scope.getBreakPoint = function(items) {
    return Math.ceil(items.length / 2); // this will round up if the number of items is odd
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" ng-controller="controller">
  <div class="col-md-12 col-sm-12 col-xs-12" ng-repeat="topLayerObject in objectArray">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <button type="button" class="btn btn-primary btn-block">{{topLayerObject.name}}</button>
    </div>
    <div style="padding-left:5px">
      <div class="col-md-6 col-sm-6 col-xs-6 lowPadding">
        <div ng-repeat="item in topLayerObject.items | limitTo : getBreakPoint(topLayerObject.items)">
          <label>
              <input type="checkbox">{{item}}
       </label>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6 lowPadding">
        <!-- Use a negative limitTo will start from the end of the list -->
        <div ng-repeat="item in topLayerObject.items | limitTo : getBreakPoint(topLayerObject.items) - topLayerObject.items.length">
          <label>
            <input type="checkbox">{{item}}
       </label>
        </div>
      </div>
    </div>
  </div>
</div>