AngularJS指令-

我正试图制定一个时间表。我从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>

---

听起来你需要循环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\u start=subcell.time\u start，但您可以根据需要对其进行修改，例如cell.time\u start+subcellIndex*15等等。

有些方法取决于所需的功能。例如，如果需要拖放。我发现，按照fullcalendar安排事件的方式，将它们放在时间块上方的层上，更容易做到这一点。那么多个时间段只处理一个元素，而一个任务只处理多个元素，那么您可以通过给它一个页边距顶部或其他什么来调整开始时间，对吗？就像我现在做的，或者使用绝对位置…对。在中检查dom，可能会有所帮助。如果您的事件不横向跨列，那么它将比具有任何持续时间的日历容易得多。在ng中要小心，如果您应该使用相等或标识运算符==或===进行检查，而不是使用单个=进行检查，因为这不是比较。这里的第一个答案也是如此

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