AngularJS指令 -

Question

我想制定一个时间表。我从我的API接收对象为：

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

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

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

我的HTML目前（请参见下面的图像的什么样子，现在快照）

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

眼下，因为tasks被放置在他们自己的容器中，然后将任务降到正确的开始时间，我基本上计算了task.time_start与当天的开始时间有多不相同，然后将其转换为一个top: $some-pixel的CSS（通过乘以时间差乘以每个小区的高度）。

我想立即将这些任务绑定到单元格上。但我该怎么做？ tasks位于shift.tasks内部的数组中，我无法弄清楚在创建单元时如何循环它们。

或者我正在做的是对的？

编辑

，我能想到的是具有细胞内ng-repeat为好，用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

的唯一的事情听起来像是你需要循环15分钟的间隔而不是（或与之结合）的任务。为每个单元格创建一个单元格，然后检查任务以及当时是否存在任务 - 填充单元格。

编辑

所以是的，基本上，你在你的编辑写了 - 这样既渲染了空非空单元格，并在需要的人填补。

事情是这样的：

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

我用ng-if="task.time_start = subcell.time_start"，但你可以修改它，但是你想，也许像cell.time_start + subcellIndex * 15，等...