角重复，跨列断

我做了多选框表单，我有我的阵列和为numColumns整数多达100项的范围可以从1到5角重复，跨列断

所以，如果我收到，说，14项和4列：

[]item 1 []item 5 []item 9 []item 13 
[]item 2 []item 6 []item 10 []item 14 
[]item 3 []item 7 []item 11 
[]item 4 []item 8 []item 12

我正在寻找流动的物品进入列，可能使用某种巧妙的嵌套重复的动态的方式。

将控制器中的所有项目都排除到自己的数组中，是否有使用ng-repeat或其他方法将我的50个项目流入我的4列的方法？

我正在使用角材料，虽然它不是必需的，我使用他们的布局。我也有bootstrap。

我不能只对列进行ng-repeat，因为它不是一个对象数组，它只是一个整数。除非有这个窍门。

这仅仅是伪代码：

{{vm.NumberOfColumns.Value}} 

    <div class="col-md-{{12/vm.NumberOfColumns.Value}} col-sm-12 multi-column"> 
     <div id="index_{{item.id}}" class="widget-wrapper multi-check-widget" action=""> 
      <ul class='multi-check'> 
       <li ng-repeat="option in item.response.options"> 
        <label><input type="checkbox" name="multichoice" ng-value="option.value">{{option.label}}</label> 
       </li> 
      </ul> 
     </div> 
    </div>

我想，这个世界就不会燃烧，如果它水平流他们，如果这是更可行的：

[]item 1 []item 2 []item 3 []item 4 
[]item 5 []item 6 []item 7 []item 8 
[]item 9 []item 10 []item 11 []item 12 
[]item 13 []item 14

来源

2016-12-22 DaveC426913

你试图使用clearfix像

data over here

–

这是有关：HTTP：//计算器。com/questions/27211799/angular-ng-repeat-add-bootstrap-row-each-3-or-4-cols – Claies

他们的解决方案似乎是将项目数组扩展到列级数据，然后进行嵌套重复 - 在外面的列，在里面的项目。可以但不优雅。 – DaveC426913

可以在分区数据你的控制器，并在视图中重复嵌套。

控制器：

分区块数据。

var partition = function(input, size) { 
    var newArr = []; 
    for (var i = 0; i < input.length; i += size) { 
     newArr.push(input.slice(i, i + size)); 
     console.log(i); 
    } 
    return newArr; 
} 

$scope.numColumns = 4;//say no. of columns is 4 
$scope.dataPartition =partition($scope.item.response.options,$scope.numColumns)

查看：

使用嵌套ng-repeat展示你喜欢它。第一个ng-repeat应安排在row，下一个应安排在column。这样你就可以得到你想要的东西。

我写了angular-material中的代码片段。你可以使用任何你想要的，这个想法保持不变。

<div layout="row" ng-repeat="temp in dataPartition"> 
    <div layout="column" ng-repeat="option in temp"> 
     <label><input type="checkbox" name="multichoice" ng-value="option.value">{{option.label}}</label> 
    </div> 
    <br>

来源

2016-12-22 04:46:20

是的，我最终打破了数据转换成列：

 function breakIntoColumns(items, numColumns) { 
      var itemsPerColumn = parseInt(Math.ceil(items.length/numColumns)); 
      var itemsInColumns = []; 
      for (var col = 0; col < numColumns; col++) { 
       itemsInColumns[col] = []; 
       for (var item = 0; item < itemsPerColumn; item++) { 
        if (items.length) { // stop when items array is empty 
         // 'shift' first item off items array, 'push' it to this column 
         itemsInColumns[col].push(items.shift()); 
        } 
       } 
      } 
      return itemsInColumns; 
     };

。

<ul class='multi-check-columns'> 
    <li ng-repeat="column in vm.itemsInColumns"> 
     <ul class='multi-check-items'> 
      <li ng-repeat="item in column"> 
       <label> 
        <input type="checkbox" name="multichoice" ng-model="item.value"> 
        &nbsp;{{item.label}} 
       </label> 
      </li> 
     </ul> 
    </li> 
</ul>

。

.multi-check-columns { 
    list-style-type:none; 
    width: 100%; 
    padding: 0; 
} 
.multi-check-columns > li { 
    display: inline-flex; 
} 
.multi-check-items { 
    list-style-type:none; 
    padding: 0 10px 0 0; 
}

来源

2016-12-23 15:47:55 DaveC426913

角重复，跨列断

回答

相关问题