angular ng-repeat vertically with column change based on window resize

Question

我有一个表单，其中有一个搜索框和一个用于缩小结果范围的筛选框。数据分为 3 组显示（每组对应过滤器）。每组下面是与搜索框中键入的内容相匹配的数据（字符串）列（空白显示全部，不匹配的内容隐藏）。

现在，1) 迭代按字母顺序垂直进行。第一列填满然后转到第二列，依此类推。 2) 要求列响应 window 调整大小。所以更小的 window = 更少的列和更大的 window = 更多的列...

我在这些上使用 ng-repeat 并且 pre-filtering/pre-formatting 所有结果都在控制器中，基于 search/filter/resize 事件然后我将二维数组传递到视图中（html).

有没有更好的方法？我在 ng-repeat 上查找了很多问题，它们大多指向控制器中的预格式化。然而，那些没有考虑的是在此之上调整列的大小。我确实实现了这个，但有点慢。

感谢阅读本文并希望得到一些提示。

Answer 1

关于这个（目前）我还不能给你一个完整的答案，我得自己搜索一下。但是您可以尝试在 css.

中使用 columns 属性

例如你使用：

angular.module("myapp", [])
  .controller('testctrl', function($scope) {
    $scope.list = ['test', 'test2', 'foo', 'bar', 'fus', 'ro', 'dah'];
  });

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<ul ng-app="myapp" ng-controller="testctrl">
  <li ng-repeat="result in list">{{result}}</li>
</ul>

关于 window 大小的列数，您可以使用 javascript 更改并操纵 columns

后面的数字

angular ng-repeat vertically with column change based on window resize

angular ng-repeat vertically with column change based on window resize

calculated-columns

window-resize

angularjs

ng-repeat