向下填充 div，同时使用引导程序保持相等的长度

Question

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

例如，在上面的示例中，它是从左到右和自上而下的字母顺序。我希望它是按字母顺序向下的，第二列从第一列继续，数据的后半部分。

这是一些精简的代码：

<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 可以将项目保持在一个均匀的水平，但可以根据需要垂直拉伸？

Answer 1

重复您的列表两次，但使用limitTo 限制每次显示的项目。使用 HTML/CSS 并排制作列表。我在下面的 sn-p 中使用了 2 个 Bootstrap 列。

您可以使用 Math.ceil(items.length / 2); 如果您有偶数个项目，它将平均拆分，否则它将四舍五入，因此左侧列表中还有 1 个项目。

第一栏：

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

第二列（负数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>