本文转自:http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap

The most reliable and technically correct approach is to transform the data in the controller. Here's a simple chunk function and usage.

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);

Then your view would look like this:

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

If you have any inputs within the ng-repeat, you will probably want to unchunk/rejoin the arrays as the data is modified or on submission. Here's how this would look in a $watch, so that the data is always available in the original, merged format:

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

Many people prefer to accomplish this in the view with a filter. This is possible, but should only be used for display purposes! If you add inputs within this filtered view, it will cause problems that can be solved, but are not pretty or reliable.

The problem with this filter is that it returns new nested arrays each time. Angular is watching the return value from the filter. The first time the filter runs, Angular knows the value, then runs it again to ensure it is done changing. If both values are the same, the cycle is ended. If not, the filter will fire again and again until they are the same, or Angular realizes and infinite digest loop is occurring and shuts down. Because new nested arrays/objects were not previously tracked by Angular, it always sees the return value as different from the previous. To fix these "unstable" filters, you must wrap the filter in a memoize function. lodash has a memoize function and the latest version of lodash also includes a chunk function, so we can create this filter very simply using npm modules and compiling the script with browserify or webpack.

Remember: display only! Filter in the controller if you're using inputs!

Install lodash:

npm install lodash-node

Create the filter:

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);
});

And here's a sample with this filter:

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

Order items vertically

1  4
2 5
3 6

Regarding vertical columns (list top to bottom) rather than horizontal (left to right), the exact implementation depends on the desired semantics. Lists that divide up unevenly can be distributed different ways. Here's one way:

<div ng-repeat="row in columns">
<div class="column" 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;
}

However, the most direct and just plainly simple way to get columns is to use CSS columns:

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

I fix without .row

<div class="col col-33 left" ng-repeat="photo in photos">
Content here...
</div>

and css

.left {
float: left;
}

[转]how to split the ng-repeat data with three columns using bootstrap的更多相关文章

  1. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  2. kaggle Data Leakage

    What is Data Leakage¶ Data leakage is one of the most important issues for a data scientist to under ...

  3. MySQL vs. MongoDB: Choosing a Data Management Solution

    原文地址:http://www.javacodegeeks.com/2015/07/mysql-vs-mongodb.html 1. Introduction It would be fair to ...

  4. HTML save data to CSV or excel

    /********************************************************************************* * HTML save data ...

  5. Anomaly Detection for Time Series Data with Deep Learning——本质分类正常和异常的行为,对于检测异常行为,采用预测正常行为方式来做

    A sample network anomaly detection project Suppose we wanted to detect network anomalies with the un ...

  6. [C4] Andrew Ng - Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization

    About this Course This course will teach you the "magic" of getting deep learning to work ...

  7. Using python to process Big Data

    Pandas is a great lib to process BIg Data. 1) pandas.pivot_table(data,values=None,columns=None,aggfu ...

  8. [Hive - Tutorial] Data Units 数据存储单位

    Data Units In the order of granularity - Hive data is organized into: 数据库.表.分区.桶 Databases: Namespac ...

  9. Python pandas 0.19.1 Intro to Data Structures 数据结构介绍 文档翻译

    官方文档链接http://pandas.pydata.org/pandas-docs/stable/dsintro.html 数据结构介绍 我们将以一个快速的.非全面的pandas的基础数据结构概述来 ...

随机推荐

  1. spring常用注解使用解析

    spring没有采用约定优于配置的策略,spring要求显示指定搜索哪些路径下的Java文件.spring将会把合适的java类全部注册成spring Bean.   问题:spring怎么知道把哪些 ...

  2. [转]精通JS正则表达式

    原文路径:http://www.jb51.net/article/25313.htm 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式 ...

  3. CSS中兼容的一面-----Hack

    国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 1 ...

  4. [deviceone开发]-课程表的例子

    一.简介 这个例子是根据一个真实app的一个页面的需求来实现的demo,通过动态add ui的方式,动态bind数据构建一个完整的课程表示例.示例并不完善,但是可以给大家一个启发. 二.效果图 三.相 ...

  5. 使用js制作一般网站首页图片轮播效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. IOS圆头像

    前言 随着腾讯QQ的普及,现在越来越多的社交类APP在显示好友头像时,都选择用圆形头像,效果如下(不包括黑底): 在ios开发中,大致有以下三种方案来实现圆形头像效果. 方案一:用Quartz2D绘制 ...

  7. smarty访问数组中的数据,如果是关联数组直接用点.

    $tpl=new Smarty();//新建一个smarty对象,我使用的是Smarty-3.1.6版本 1.设置smarty模板路径$tpl->setTemplateDir():默认情况下是t ...

  8. Android 判断SIM卡属于哪个移动运营商

    第一种方法:获取手机的IMSI码,并判断是中国移动\中国联通\中国电信 TelephonyManager telManager = (TelephonyManager) getSystemServic ...

  9. Facebook开源动画库 POP-POPDecayAnimation运用

    关于POPDecayAnimation的介绍先引用别人写的一些内容,基本上把它的一些注意点都说明了: Decay Animation 就是 POP 提供的另外一个非常特别的动画,他实现了一个衰减的效果 ...

  10. 优化MySchool数据库(事务、视图、索引)

    事务.视图.索引: 事务:当生活逻辑中的“一个步骤”,需要使用多条SQL去完成时,必须使用事务来确保其“完整性“. 视图:简化数据库结构,方便你编写SQL语句(简化SQL语句的编写) 索引:提高“数据 ...