javascript - 使用 bootstrap 向下填充 div，同时保持相同的长度

Question

目前我有一个列表，我使用 ng-repeat 填充并使用宽度为 6 的列。但是，我迭代的数据是按字母顺序排序的，我希望列表按字母顺序向下填充，同时仍然保留有两个均匀堆叠的柱子的美感。这是否可以在不进行数据预处理的情况下使用 Bootstrap 完成？

例如，在上面的例子中，是从左到右，从上到下的字母顺序。我希望它按字母顺序向下排列，并且第二列从第一列开始继续使用后半部分数据。

这里是一些精简代码:

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

编辑:需要明确的是，每个对象都在同一个平面数组中，因此子对象和父对象不会彼此分离，也不会在逻辑上分组。这就是垂直人口对我如此有吸引力的原因 - 我将不得不添加额外的数据结构或多次循环数据来处理这些嵌套列的处理只是为了计算它们。是否有某种 flexbox 可以将元素保持在同一水平，但可以根据需要垂直拉伸(stretch)？

Answer 1

重复您的列表两次，但使用 limitTo 限制每次显示的元素.使用 HTML/CSS 并排排列列表。我在下面的代码片段中使用了 2 个 Bootstrap 列。

您可以计算出左栏中应该有多少元素，使用 Math.ceil(items.length / 2);如果您有偶数个元素，它将平均拆分，否则会四舍五入，因此左侧列表中还有 1 个元素。

第一列:

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

第 2 列(负数 limitTo 将从列表末尾开始):

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