我的表单有一个搜索框和一个缩小结果的过滤器框。数据被分成3组显示(每组对应于过滤器)。在每个组下面是与搜索框中键入的内容相匹配的数据列(字符串)(空白显示所有内容以及不匹配的内容被隐藏)。
现在,1)迭代按字母顺序垂直移动。第一列填满然后转到第二列,依此类推。 2)需要列来响应窗口大小调整。因此窗口越小=列越少,窗口越大=列越多......
我在这些上使用ng-repeat
并预先过滤/预格式化控制器中的所有结果,基于搜索/过滤/调整大小事件然后我将2维数组传递到视图中(html )。
有更好的方法吗?
我在ng-repeat
上查了很多问题,他们主要指的是在控制器中预先格式化。然而,那些没有考虑的是列重新调整大小。我执行此操作并且它有点慢。
感谢您阅读本文并希望获得一些提示。
答案 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
后面的数字