栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用引导程序将ng-repeat数据分为三列

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用引导程序将ng-repeat数据分为三列

最可靠,技术上最正确的方法是在控制器中转换数据。这是一个简单的块函数和用法。

function chunk(arr, size) {  var newArr = [];  for (var i=0; i<arr.length; i+=size) {    newArr.push(arr.slice(i, i+size));  }  return newArr;}$scope.chunkedData = chunk(myData, 3);

然后您的视图将如下所示:

<div  ng-repeat="rows in chunkedData">  <div  ng-repeat="item in rows">{{item}}</div></div>

如果您在中有任何输入

ng-repeat
,则可能需要在修改数据或提交数据后取消整理/重新加入数组。这是在中的外观
$watch
,以便始终以原始合并格式提供数据:

$scope.$watch('chunkedData', function(val) {  $scope.data = [].concat.apply([], val);}, true); // deep watch

许多人喜欢在视图中使用过滤器来完成此操作。这是可能的,但只能用于显示目的!如果在此过滤后的视图中添加输入,将导致 可以 解决的问题,但
不是很漂亮或不可靠

该过滤器的问题在于它每次都会返回新的嵌套数组。Angular正在监视过滤器的返回值。过滤器第一次运行时,Angular会知道该值,然后再次运行它以确保完成更改。如果两个值相同,则循环结束。如果不是,过滤器将一次又一次地触发直到它们相同为止,否则Angular意识到正在发生无限摘要循环并关闭。由于新的嵌套数组/对象以前没有被Angular跟踪,因此它总是将返回值视为与以前的值不同。要修复这些“不稳定”的过滤器,必须将过滤器包装在一个

memoize
函数中。
lodash
具有
memoize
功能,而lodash的最新版本也包含
chunk
功能,因此我们可以使用以下方法非常简单地创建此过滤器
npm
模块并使用
browserify
或编译脚本
webpack

记住:仅显示! 如果使用输入,请过滤控制器!

安装lodash:

npm install lodash-node

创建过滤器:

var chunk = require('lodash-node/modern/array/chunk');var memoize = require('lodash-node/modern/function/memoize');angular.module('myModule', []).filter('chunk', function() {  return memoize(chunk);});

这是带有此过滤器的示例:

<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">  <div  ng-repeat="item in row">    {{($parent.$index*row.length)+$index+1}}. {{item}}  </div></div>

垂直订购商品

1  42  53  6

对于垂直列(从上到下列出),而不是水平列(从左到右),确切的实现取决于所需的语义。划分不均匀的列表可以以不同的方式分布。这是一种方法:

<div ng-repeat="row in columns">  <div  ng-repeat="item in row">    {{item}}  </div></div>var data = ['a','b','c','d','e','f','g'];$scope.columns = columnize(data, 3);function columnize(input, cols) {  var arr = [];  for(i = 0; i < input.length; i++) {    var colIdx = i % cols;    arr[colIdx] = arr[colIdx] || [];    arr[colIdx].push(input[i]);  }  return arr;}

但是,获取列的最直接,最简单的方法是使用 CSS列

.columns {  columns: 3;}<div >  <div ng-repeat="item in ['a','b','c','d','e','f','g']">    {{item}}  </div></div>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/633230.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号