Question

我想要以下结果：

<div class="row">
    <div class="col-md-4>
        <input type="checkbox"> Item 1
        <input type="checkbox"> Item 2
        <input type="checkbox"> Item 3
        <input type="checkbox"> Item 4
    </div>
    <div class="col-md-4>
        <input type="checkbox"> Item 5
        <input type="checkbox"> Item 6
        <input type="checkbox"> Item 7
        <input type="checkbox"> Item 8
    </div>
    <div class="col-md-4>
        <input type="checkbox"> Item 9
        <input type="checkbox"> Item 10
        <input type="checkbox"> Item 11
        <input type="checkbox"> Item 12
    </div>
</div>

我的控制器中有变量：

$scope.items = ["Item 1", "Item 2", "Item 3", "Item 4", ...];

我无法找到一种干净的方式（没有ng-ifs，计算迭代的百分比等）来与ng-repeat进行迭代并获得该结果。有没有？

提前致谢。

Answer 1

如果你想将它分成3个div，每个div有4个复选框，你可以改变你的变量，如：

$scope.items = {"div1":["Item 1", "Item 2", "Item 3", "Item 4"],
                "div2":["Item 5", ..... ],
                "div3":[.........] };

然后你的html：

<div class="row">
    <div class="col-md-4" ng-repeat="divs in items">
         <input type="checkbox" ng-repeat="checkbox in divs track by $index" value="{{checkbox}}">
    </div>
</div>

Answer 2

这对你有用吗？

<div ng-controller="ExampleController">
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <div ng-repeat="item in items | limitTo:4:0">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
      <div class="col-xs-4">
        <div ng-repeat="item in items | limitTo:4:4">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
      <div class="col-xs-4">
        <div ng-repeat="item in items | limitTo:4:8">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
    </div>
  </div>
</div>

如果您想要动态数量的列，则必须先计算列数。您可以使用控制器中的$scope.cols = new Array(Math.ceil($scope.items.length / 4));执行此操作，然后使用此操作循环：

<div ng-controller="ExampleController">
  <div class="container">
    <div class="row">
      <div class="col-xs-4" ng-repeat="col in cols track by $index" ng-init="colIndex = $index">
        <div ng-repeat="item in items | limitTo:4:(colIndex*4)">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
    </div>
  </div>
</div>

AngularJS - 重复创建cols的最佳方法

2 个答案: