Learning (my) AngularJS by example?

Question

JavaScript

Hello.
Trying to learn angularjs. but there is little information, the reference on the site of the angular itself is not complete, I don’t understand in which direction to dig. help me please.
The task is next.
We need to make a reservation system for rooms for the next 10 days, starting today. The appearance is as follows: a table, in the rows - rooms, in the columns - dates. it turns out several rows and 11 columns (the name of the room and 10 columns with the date).
The cells of the columns should contain:
a link for recording, if the room is free.
the text "occupied" - if the room is not free.
the text "occupied by you" and a link to vacate the room if this is the current user's reservation.
I went this way: on the server there is a controller that issues a Json with a collection of days, rooms and a two-dimensional array (which becomes one-dimensional on the client) with the room reservation status.
how to generate the title of the row and column headers did not raise questions from me. but how to generate a matrix is ​​a question. in theory, there should be some binding of table cells to data, mouse click handlers and updating data on the server, the value of the cells should also be created by some kind of logic, but I don’t understand how to do this :(
here is the code that I have there is:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

<script type="text/javascript">

    function MyCtrl($scope,$http) {
        $http.get("/sp/sorting/TimeTable").success(function (data) {
            for (i = 0; i < data.days.length; i++) {
                var date = new Date(parseInt(data.days[i].substr(6)));
                data.days[i] = date;
            }

            $scope.days = data.days;
            $scope.stores = data.stores;
        });

        //$scope.reservs = [];
    }

</script>

<div ng-app ng-controller="MyCtrl">

<table class="datatable">
<tr>
<td> </td>
<td ng-repeat="day in days">{{day | date:"dd.MM.yyyy"}}</td>
</tr>
<tr ng-repeat="room in stores|orderBy:'name'">
<td>{{room.name}}</td>
<td></td>
</tr>
</table>

</div>

Unfortunately, it was not possible to format the code with line breaks.
Which approach should be used in the given case?
What is the best data structure to use to represent room reservation information?
and how to bind this structure to table cells?
Thank you for your attention.

Answer 1

I would form a date range on the client, request data from the server from this range.
The table would be drawn according to this range, and the contents of the cells would already be sorted out according to the data from the server.
In table cells, handlers would be placed like

<a href="" ng-click="doSomething(room)">click</a>

and in the controller:

function MyCtrl($scope,$http) { 
$scope.doSomething(room){
//room - объект комнаты
//можно сохранить на сервер и т.п.
}
}

Answer 2

I have made some progress in my study.
If the reservation data structure contains objects that have an id field - which indicates the room number and date - which indicates the date, then the binding to the cells can be done as follows:
In javascript, insert the following code:

$scope.showreserv = function (room, day) {
            var x = $filter('filter')($scope.reservs, { id: room.id, date: day });

            if (x.length > 0) return x[0].type;
            else return "-";
        }

and in html the following:

<tr ng-repeat="room in stores|orderBy:'name'">
<td ng-click="test(room)">{{room.id}} {{room.name}}</td>
<td ng-repeat="day in days">{{showreserv(room,day)}}</td>
</tr>

the stores collection contains information about locations, the id field is an identifier, name is the name
of the days collection, it contains days starting from today. (the array contains timestamp integers)
here is this piece of html code

<td ng-repeat="day in days">{{showreserv(room,day)}}</td>

is repeated for each room and day, and the showreserv function is called on each binding. Her code is above.
filtering is an awesome thing (although I didn’t figure out how to work with it right away)

var x = $filter('filter')($scope.reservs, { id: room.id, date: day });

where $scope.reservs is an array of all reservations.
and { id: room.id, date: day } - means that only those elements whose id and date fields match the input parameters of the binding function should remain in the result.
here I had one nuance: the filter did not work while the date in the collections was represented by the Date object. apparently, different instances were not compared. when instead of Date objects I began to use an integer timestamp, everything fell into place.
Now I need to do the following things:
1. display a different pattern in the table cells for each reservation type value and when there is no reservation.
2. bind a click handler to the cells
3. make sure that the data is sent to the server.

Answer 3

Here, actually, one more question ripened.
how best (ideologically correct) to insert html controls into cells, depending on the type.
the content options are as follows:
"sign up" link "
busy" text on a yellow background
"busy" text on a red background
"you are booked in - not confirmed" link "check out"
text "you are booked in - confirmed" link "check out"
I tried to do this is via compile. but nothing has worked so far:

<td ng-repeat="day in days"><div compile="showreserv(room,day)"></div></td>

Tell me, please, where to dig.