Question

我正在做一个多复选框表单，我的数组中有多达100个项目，而numColumns整数的范围是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

Answer 1

您可以在控制器中对数据进行分区，并在视图中执行嵌套重复。

<强>控制器：

将数据分块。

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>

Answer 2

是的，我最终将数据分成了几列：

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

角度重复，突破列

2 个答案: