Задать вопрос
Razbezhkin
@Razbezhkin
программист, преподаватель

Изучение (моё) AngularJS на примере?

Здравствуйте.

Пытаюсь изучить angularjs. но информации мало, референс на сайте самого ангулара не полный, в какую сторону копать не понимаю. помогите, пожалуйста.


Задача следующая.

Нужно сделать систему бронирования помещений на ближайшие 10 дней, начиная с сегодня. Внешний вид такой: таблица, в строках — помещения, в столбцах — даты. получается несколько строк и 11 столбцов (название помещения и 10 столбцов с датой).

В ячейках столбцов должно находиться:

ссылка для записи, если помещение свободно.

текст «занято» — если помещение несвободно.

текст «занято вами» и ссылка для освобождения помещения, если это бронь текущего пользователя.


Я пошел таким путем: на сервере есть контроллер, который выдает Json с коллекцией дней, помещений и двумерный массив (который на клиенте становиться одномерным) со статусом бронирования помещения.


как сгенерировать название заголовков строк и столбцов не вызволо у меня вопросов. а вот как сгенерировать матрицу — вопрос. по идее, должна быть какая-то привязка ячеек таблицы к данным, обработчики щелчков мыши и обновление данных на сервере, значение ячеек к тому же должно создаваться какой-то логикой, но как это сделать — непонимаю :(


вот тот код, который у меня есть:

<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>



К сожалению, не удалось отформатировать код с переносами на новую строку.

Какой в жанном случае использовать подход?

какую структуру данных для представления информации о брони помещений лучше всего использовать?

и как эту структуру привязать к ячейкам таблицы?


Спасибо за внимание.
  • Вопрос задан
  • 5940 просмотров
Подписаться 4 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
sHinE
@sHinE
веб-разработчик, php/js/mysql и сопутствующее
Я бы диапазон дат формировал на клиенте, запрашивал данные с сервера из этого диапазона.
Таблицу бы рисовал по этому диапазону, а содержимое ячеек уже перебирал по данным с сервера.
В ячейках таблицы обработчики бы расставлял типа
<a href="" ng-click="doSomething(room)">click</a>

а в контроллере:
function MyCtrl($scope,$http) { 
$scope.doSomething(room){
//room - объект комнаты
//можно сохранить на сервер и т.п.
}
}
Ответ написан
Razbezhkin
@Razbezhkin Автор вопроса
программист, преподаватель
Я немного продвинулся в своем изучении.
Если структура данных о резервировании содержит объекты, в которых есть поле id — которое обозначает номер помещения и date — которое обозначает дату, то привязку к ячейкам можно сделать следующим образом:

В javascript'е вставить следующий код:

$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 "-";
        }



а в html'е следующий:

<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>


коллекция stores содержит информацию о пемещениях, поле id — идентификатор, name — название
коллекция days — содержит дни, начиная с сегодня. (в массиве содержатся целые числа timestamp)
вот этот кусок html кода

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


повторяется для каждого помещения и дня и при каждой привязке вызывается функция showreserv. Ее код — выше.

фильтрация — обалденная штука (хотя додумался как с ней работать не сразу)

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


здесь $scope.reservs — массив всех резервирований.
а { id: room.id, date: day } — обозначает что в результате должны остаться только те элементы, у который поля id и date соответствуют входным параметрам функции привязки.

тут у меня был один ньюанс: фильтр не работал, пока дата в коллекциях была представлена объектом Date. видимо, разные экземпляры не сравнивались. когда вместо объектов Date я стал использовать целое число timestamp — все встело на свои места.

Теперь мне нужно сделать следующие вещи:
1. отображать в ячейках таблицы разные шаблоны для каждого значения типа резервирования и при отсутствии резервирования.
2. привязать к ячейкам обработчик клика
3. сделать так, чтобы данные отправлялись на сервер.
Ответ написан
Razbezhkin
@Razbezhkin Автор вопроса
программист, преподаватель
Вот, собственно, созрел еще один вопрос.
как лучше всего (правильнее с идеологической точки зрения) в ячейки вставлять html элементы управления в зависимости от типа.
варианты содержимого следующие:
ссылка «записаться»
текст «занято» на желтом фоне
текст «занято» на красном фоне
текст «вы записаны — не подтверждено», ссылка «выписаться»
текст «вы записаны — подтверждено», ссылка «выписаться»

Я попробовал сделать это через compile. но пока ничего не получилось:

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


Подскажите, пожалуйста, куда копать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
26 дек. 2024, в 15:04
3000 руб./за проект
26 дек. 2024, в 14:50
2000 руб./за проект
26 дек. 2024, в 14:40
15000 руб./за проект