Angular 1.5 Two-Way Binding
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1">
<table ng-repeat="group in data">
<thead>
<th> {{group.name}} </th>
</thead>
<tbody ng-repeat="item in group.items">
<tr>
<td> --- <b>{{getIndex($parent.$index - 1, $index)}}</b> | {{item}} </td>
</tr>
</tbody>
</table>
</div>
JavaScript
angular.module('myApp', [])
.controller('Ctrl1', function($scope) {
$scope.data = [
{name: 'Group1', items: ['a','b']},
{name: 'Group2', items: [1,2,3]},
{name: 'Group3', items: ['x', 'xx', 'xxx', 'xxxx']}
];
$scope.getIndex = function(previousGroupIndex, currentItemIndex){
if(previousGroupIndex >= 0){
var previousGroupLength = getPreviousItemsLength(previousGroupIndex);
return previousGroupLength + currentItemIndex;
}
return currentItemIndex;
};
function getPreviousItemsLength(currentIndex){
var length = 0;
for (var i = 0; i <= currentIndex; i++){
length += $scope.data[i].items.length;
}
return length;
}
// for beautiful and short solution of the sum calculation it would be better
// using Array.prototype.reduce()
//function getPreviousItemsLength(previousGroupIndex){
// return $scope.data.reduce(function(previousValue, currentGroup, index){
// return index <= previousGroupIndex ? previousValue + currentGroup.items.length : previousValue;
// }, 0);
//}
});