I have a scenario in which I have to create a new ul if inner li list item reach every 10th option. For example here is the fiddle. I have two variables and each variable contains a number of options. I have outer ng-repeat on row div and inner repeat on list item li. Due to some design issues I have to create a new ul if inner li options reach 10 count. That is a ul can handle only 10 item list. How can I do this dynamically without affecting existing variable code. I tries some group by stuff but it is limited to modify your existing variable array.
Here is the code
HTML
<div ng-controller="MainCtrl">
<div class="grid-list">
<div class="grid-row" ng-repeat="variable in variables track by $index">
<div class="grid_question"> {{variable.name}}
<ul class="grid-list"> /// add new ul after every 10 option, ul can contain only 10 list.
<li ng-repeat="option in variable.options track by $index">{{option.name}}</li>
</ul>
</div>
</div>
</div>
</div>
JS Code
var app = angular.module('myApp', []);
function MainCtrl($scope) {
$scope.variables = [{
name: 'List 1',
options: [{
name: 'Option 1',
value: '',
has_comment: false
}, {
name: 'Option 2',
value: '',
has_comment: false
}, {
name: 'Option 3',
value: '',
has_comment: false
}, {
name: 'Option 4',
value: '',
has_comment: false
}, {
name: 'Option 5',
value: '',
has_comment: false
}, {
name: 'Option 6',
value: '',
has_comment: false
}, {
name: 'Option 7',
value: '',
has_comment: false
}, {
name: 'Option 8',
value: '',
has_comment: false
}, {
name: 'Option 9',
value: '',
has_comment: false
}, {
name: 'Option 10',
value: '',
has_comment: false
}, {
name: 'Option 11',
value: '',
has_comment: false
}, {
name: 'Option 12',
value: '',
has_comment: false
}, {
name: 'Option 13',
value: '',
has_comment: false
}]
},
{
name: 'List 2',
options: [{
name: 'Option 1',
value: '',
has_comment: false
}, {
name: 'Option 2',
value: '',
has_comment: false
}, {
name: 'Option 3',
value: '',
has_comment: false
}, {
name: 'Option 4',
value: '',
has_comment: false
}, {
name: 'Option 5',
value: '',
has_comment: false
}, {
name: 'Option 6',
value: '',
has_comment: false
}, {
name: 'Option 7',
value: '',
has_comment: false
}, {
name: 'Option 8',
value: '',
has_comment: false
}, {
name: 'Option 9',
value: '',
has_comment: false
}, {
name: 'Option 10',
value: '',
has_comment: false
}, {
name: 'Option 11',
value: '',
has_comment: false
}, {
name: 'Option 12',
value: '',
has_comment: false
}, {
name: 'Option 13',
value: '',
has_comment: false
}]
},
]
}