Arhn - архитектура программирования

Доступ к каждой отдельной пользовательской ячейке с календарем начальной загрузки Angular

Я работаю над приложением, в котором мне нужен скелет календаря (без стандартных событий), чтобы я мог помещать таблицы в каждую ячейку, поэтому я использую Календарь Angular Bootstrap с пользовательские шаблоны ячеек. У меня все работает нормально с точки зрения отображения пользовательского шаблона в каждой ячейке и возможности перемещаться между месяцами, но мне нужно иметь доступ к каждому отдельному дню и делать данные доступными в каждом из них.

Вот мой контроллер:

(function() {
  angular.module('myApp')
    .controller('calendarController', function($scope, $state, moment, calendarConfig) {

    var vm = this;

    calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
    calendarConfig.dateFormatter = 'moment';

    vm.events = [];
    vm.calendarView = 'month';
    vm.viewDate = moment().startOf('month').toDate();

    $scope.$on('$destroy', function() {
      calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
    });
  });
})();

и соответствующий файл dayTemplate.html:

<div class="cal-month-day">

    <span
      class="pull-right"
      data-cal-date
      ng-click="calendarCtrl.dateClicked(day.date)"
      ng-bind="day.label">
    </span>
<!--
  <small style="position: absolute; bottom: 10px; left: 5px">
    There are {{ day.events.length }} events on this day
  </small> -->

  <!-- <table class="table table-bordered table-condensed"> -->
  <table class="table table-bordered table-condensed">
    <thead>
      <tr>
        <td>Station</td>
        <td>Position</td>
        <td>Name</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3" align="top">1</td>
        <td>Position</td>
        <td>Name</td>
      </tr>
      <tr>
        <td>Position</td>
        <td>Name</td>
      </tr>
      <tr>
        <td>Position</td>
        <td>Name</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-bordered table-condensed">
    <tbody>
    <tr>
      <td rowspan="3" align="top">2</td>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    </tbody>
  </table>

  <table class="table table-bordered table-condensed">
    <tbody>
    <tr>
      <td rowspan="3" align="top">3</td>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    <tr>
      <td>Position</td>
      <td>Name</td>
    </tr>
    </tbody>
  </table>

</div>

При обычном использовании календаря вы можете видеть, что объект days.events имеет данные, но мне нужно получить доступ к этому объекту или создать свой собственный, чтобы я мог заполнять свои таблицы. Есть ли простой (или даже не очень простой) способ сделать это?

Спасибо.

ОБНОВЛЕНИЕ: я только что вернулся и прочитал docs и заметил это

Необязательное выражение, которое оценивается для каждой ячейки, созданной для представлений года и месяца. calendarCell может использоваться в выражении и представляет собой объект, содержащий текущие данные ячейки, которые вы можете изменить (см. службу calendarHelper исходный код или просто console.log, чтобы узнать, какие данные доступны). Если вы добавите свойство cssClass, оно будет применено к ячейке.

Из-за недостатка знаний я не понимаю, как использовать это для переопределения. Если я console.log calendarCell в моем calendarController, он задыхается, потому что этот объект не существует. Если я правильно понимаю, я могу перехватить данные ячейки и изменить их, но я не понимаю, как это сделать.


Ответы:


1

В данном случае правильным ответом оказался RTFM. Согласно документам:

<div ng-controller="CellModifierCtrl as vm">
  <ng-include src="'calendarControls.html'"></ng-include>
  <mwl-calendar
    events="vm.events"
    view="vm.calendarView"
    view-date="vm.viewDate"
    cell-modifier="vm.cellModifier(calendarCell)">
  </mwl-calendar>
</div>

идет с этим в контроллере:

vm.cellModifier = function(cell) {
  console.log(cell);
  if (cell.label % 2 === 1 && cell.inMonth) {
    cell.cssClass = 'odd-cell';
  }
  cell.label = '-' + cell.label + '-';
};

и вуаля!, у вас есть доступ к данным. Я все еще пытаюсь понять, как передать дополнительные данные в функцию, но для этого я открою отдельный вопрос.

02.07.2016
  • Вы выяснили, как передать дополнительные данные в функцию, потому что я хочу получить доступ к деталям события внутри функции модификатора ячейки? 19.02.2018
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..