SO - 15545852 - NG

by Arun P Johny

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<div ng-app="test-app" ng-controller="MyController">

	<h1>Bookings per court</h1>
	<table>
		<thead>
			<tr>
				<td>Name</td>
				<td>Number</td>
				<td>Nr of players</td>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="court in courts">
				<td>{{court.name}}</td>
				<td>{{court.number}}</td>
				<td>{{court.nrOfPlayers}}</td>
				<td>
					<a href ng:click="shouDetails(court)">Details</a>
				</td>
			</tr>
		</tbody>
	</table>

	<span ng-show="players && players.length > 0">
		<ul>
			<li ng-repeat="player in players">
				<span class="name">{{player}}</span>
			</li>
		</ul>	
	</span>

	<span ng-show="players && players.length == 0">
		No players
	</span>

    
</div>

JavaScript

var app = angular.module('test-app', []);

app.controller('MyController', function($scope, $rootScope, $timeout){
    
    $scope.copy = {
        p1: ['c1 p1', 'c1 p2'],
        p3: ['c3 p1', 'c3 p2', 'c3 p3', 'c3 p4', 'c3 p5']
    }
    
	$scope.courts = [
		{
			"number": 1,
			"name": "the best court",
			"nrOfPlayers": 2
		}, {
			"number": 2,
			"name": "the bad court",
			"nrOfPlayers": 0
		}, {
			"number": 3,
			"name": "the other court",
			"nrOfPlayers": 5
		}
	];
    
    $scope.loadPlayers = function(court){
        //Implement your logic here
        //Probably using ajax
        $timeout(function(){
            $scope.players = $scope.copy['p' + court.number] || [];
        }, Math.random() * 2000);
    }

    $scope.shouDetails = function(court){
        if(court.nrOfPlayers) {
            delete $scope.players;
            $scope.loadPlayers(court);
        } else {
            $scope.players = [];
        }
    }
    
})