<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example100-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
</head>
<body ng-app="repeatApp">
<script>
angular.module('repeatApp', [])
.controller('repeatController', ['$scope', function($scope) {
$scope.names=[
{no:'1',
name:'Jani',
country:'Norway',
cities:[{city:'A1'},
{city:'A2'},
{city: 'A3'}]},
{no:'2', name:'Hege',country:'Sweden', cities:[{city:'b1'},{city:'b2'}, {city: 'b3'}]},
{no:'3', name:'Kai',country:'Denmark', cities:[{city:'c1'},{city:'c2'}, {city: 'c3'}]}];
var getCities = function(no){
for(i=0;i<=$scope.names.length; i++){
if(no === $scope.names[i].no){
console.log($scope.names[i].cities);
return $scope.names[i].cities;
}
};
};
$scope.togglePayablePayments = function(no, index) {
$scope.cities = getCities(no);
};
}]);
</script>
<div ng-controller="repeatController">
<table>
<tbody ng-repeat="name in names">
<tr >
<td>
{{name.no}}
</td>
<td>
{{name.name}}
</td>
<td>{{name.country}}</td>
<td>
<button data-ng-click="isOpenPayablePayments[$index] = !isOpenPayablePayments[$index]; togglePayablePayments(name.no, $index)" >Paid</button>
</td>
</tr>
<tr>
<td>
<table>
<thead>
<tr>
<th>City</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="city in name.cities">
<td>{{city.city}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
// Code goes here
/* Styles go here */