角度ng-重复垂直,基于窗口大小调整列更改

时间:2016-05-26 10:15:29

标签: angularjs ng-repeat calculated-columns window-resize

我的表单有一个搜索框和一个缩小结果的过滤器框。数据被分成3组显示(每组对应于过滤器)。在每个组下面是与搜索框中键入的内容相匹配的数据列(字符串)(空白显示所有内容以及不匹配的内容被隐藏)。

现在,1)迭代按字母顺序垂直移动。第一列填满然后转到第二列,依此类推。 2)需要列来响应窗口大小调整。因此窗口越小=列越少,窗口越大=列越多......

我在这些上使用ng-repeat并预先过滤/预格式化控制器中的所有结果,基于搜索/过滤/调整大小事件然后我将2维数组传递到视图中(html )。

有更好的方法吗? 我在ng-repeat上查了很多问题,他们主要指的是在控制器中预先格式化。然而,那些没有考虑的是列重新调整大小。我执行此操作并且它有点慢。

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

1 个答案:

答案 0 :(得分:0)

我不能给你一个完整的答案(还)我将不得不自己搜索一下。但你可以尝试使用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>

在窗口大小的列数上,您可以使用javascript更改并操纵columns后面的数字