Question

使用ng-repeat，我希望能够“突破”循环以显示不同列布局中的部分数据。这是我作为伪代码的ng-repeat的开始。除了文件管理器或自定义指令之外，我不确定如何“整理”我的数据？

var items= [1,2,3,4,5,6,7,8,9];

<div ng-repeat="item in items">
    <!-- 3 columns -->
    <div class="row">   
        <div class="item col-md-4">
            {{item}}
        </div>
    </div>

... break out of loop after 3 items to continue looping in a new row

    <!-- 2 columns -->
    <div class="row">
        <div class="item col-md-6">
            {{item}}
        </div>
    </div>

... etc ....

</div>

下面的html是我想要实现的输出：

<!-- 3 columns -->
<div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
</div>
<!-- 2 columns -->
<div class="row">
    <div class="col-md-6">4</div>
    <div class="col-md-6">5</div>
</div>
<!-- 1 column -->
<div class="row">
    <div class="col-md-12">6</div>
</div>
<!-- 3 columns -->
<div class="row">
    <div class="col-md-4">7</div>
    <div class="col-md-4">8</div>
    <div class="col-md-4">9</div>
</div>

我想通过将参数传递给过滤器或类似物来实现这一点。在下面的线程中找到类似的东西。请帮忙！ - ＆GT; add bootstrap rows during ng-repeat

Answer 1

正如您提供的链接中所述，您可以在ngRepeat之前在控制器中对数组进行分块：

app.controller('MainCtrl', function($scope) {

  $scope.myArray = [1,2,3,4,5,6,7,8,9];

  $scope.rowFilter = function (data) {

    var rows = [];

    var slices = [3,2,1,3];
    slices.forEach(function (s) {
      rows.push(data.splice(0,s));
    });

    return rows;
  };

  $scope.processArray = $scope.rowFilter($scope.myArray);
});
// filter for add multiple class
app.filter("col", function() {
  return function(value) {
    return ['col-xs-','col-sm-', 'col-md-'].map( function (c) { return c + value} ).join(' ');
  }
});

在视图中：

<div class="row" ng-repeat="row in processArray">
    <div ng-repeat="column in row" ng-class="(12/row.length) | col">{{column}}</div>
</div>

DEMO

Answer 2

<div class="row">
<% 
var data = [1,2,3,4,5,6,7,8,9];
var columnClass = 'md-4';
for(var i=0; data.length; i++) {
%> <div class="col-<%=columnClass%>"><%=data[i]%></div><%
if(i == 2) { 
%>
</div>
<div class="row">
<%
var columnClass = 'md-6';
}    
if(i == 4) { 
%>
</div>
<div class="row">
<%
var columnClass = 'md-12';
}  
if(i == 5) { 
%>
</div>
<div class="row">
<%
var columnClass = 'md-4';
}  
}
%>
</div>

样式bootstrap行与角度ng重复

2 个答案:

DEMO