Directive AngularJS -

Question

J'essaie de faire un calendrier. L'objet que je reçois de mon API est la suivante:

schedule : { 
    id, 
    name, 
    shifts : [] 
} 

// each shift is 
shift : { 
    id, 
    schedule_id, 
    user, 
    tasks: [] 
} 

// each task is 
task: { 
    id, 
    shift_id, 
    time_start, 
    time_end 
} 

Mon HTML est actuellement (s'il vous plaît voir l'image ci-dessous pour un aperçu de ce qu'il ressemble à ce moment)

<div class="schedule"> 
    <!-- This is the time of the day column, such as 10:00, 11:00 --> 
    <div id="clock"></div> 

    <div class="shifts"> 
     <div class="shift" ng-repeat="shift in schedule.shifts"> 
      <!-- The user assigned to this shift --> 
      <div class="user" ng-bind="shift.user"></div> 

      <!-- This is the time cells in 15min interval --> 
      <div class="cells"> 
       <!-- Not going into detail, but this creates the cells 
       <div class="cell" ng-repeat="cell in cells"></div> 
      </div> 

      <!-- The tasks --> 
      <div class="tasks"> 
       <div class="task" ng-repeat="task in shift.tasks"></div> 
      </div> 

     </div> 
    </div> 
</div> 

En ce moment, depuis les tasks sont placés dans leur propre conteneur, puis pour ramener la tâche à l'heure de début, je calcule à quel point le task.time_start est différent du début de la journée, puis le convertit en CSS de top: $some-pixel (en multipliant la différence de temps par la hauteur de chaque cellule).

Je voudrais que ces tâches soient instantanément liées aux cellules. Mais comment puis-je faire ça? Les tasks sont dans un tableau à l'intérieur shift.tasks, et je ne peux pas comprendre comment je pourrais les boucler pendant que je crée les cellules.

Ou peut-être que ce que je fais est juste?

Modifier

La seule chose que je peux penser est d'avoir l'ng-repeat intérieur de la cellule ainsi, et utiliser ng-if

<div class="cells"> 
    <div class="cell" ng-repeat="cell in cells"> 
     <div class="task" ng-repeat="task in shift.task" ng-if="task.time_start = cell.time_start"></div> 
    </div> 
</div> 

Answer 1

On dirait que vous devez boucle les intervalles de 15 minutes au lieu de (ou combinés avec) des tâches. Créez une cellule pour chacun, puis vérifiez les tâches et s'il y a une tâche présente à ce moment-là - remplissez la cellule.

EDIT

Alors oui, au fond, ce que vous avez écrit dans votre édition - afin de rendre les cellules vides et non vides et remplir les nécessaires.

Quelque chose comme ceci:

<div class="cells"> 
    <div class="cell" ng-repeat="cell in cells"> 
     <div class="subcell" ng-repeat="subcell in subcells"> <!-- 4 subcells --> 
      <div class="task" ng-repeat="task in shift.task" ng-if="task.time_start = subcell.time_start"></div> 
     </div> 
    </div> 
</div> 

J'utilisé ng-if="task.time_start = subcell.time_start", mais vous pouvez le modifier comme vous le voulez, peut-être comme cell.time_start + subcellIndex * 15, etc ...