AngularJS - Best way to repeat creating cols -
i want following result:
<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> and have in controller variable:
$scope.items = ["item 1", "item 2", "item 3", "item 4", ...]; i can't find clean way (without ng-ifs, calculating % of iteration, etc) iterate ng-repeat , result. there any?
thanks in advance.
would work you?
<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> if want dynamic number of columns, you'd have calculate number of columns first. can using $scope.cols = new array(math.ceil($scope.items.length / 4)); in controller loop on using this:
<div ng-controller="examplecontroller"> <div class="container"> <div class="row"> <div class="col-xs-4" ng-repeat="col in cols track $index" ng-init="colindex = $index"> <div ng-repeat="item in items | limitto:4:(colindex*4)"> <input type="checkbox" /> {{item}} </div> </div> </div> </div> </div>
Comments
Post a Comment