ng-class中的索引无法正常工作

I have a problem with this code:

我有这个代码的问题:

<div>
                <table class="list" border="0" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr class="headerRow">
                            <th>Action&nbsp;</th>
                            <th>Busy&nbsp;</th>
                            <th>Subject&nbsp;</th>
                            <th ng-repeat="hour in hours">{{hour | number:2}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in items">
                            <td>{{item.name}}</td>
                            <td>{{item.activityDate | date:'dd/MM/yyyy'}}</td>
                            <td>{{item.subject}}</td>
                            <td ng-repeat="hour in hours"
                                ng-class="{BusyCell: hours[$index] >= item.startDateTime && hours[$index] <= item.endDateTime}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

In ng-class I would color every cell that is in the array startDateTime and endDateTime, but it works only for the first row that has only a value in those arrays, for the second that has two doesn't work. Do you have any suggestion? Thanks in advance!

在ng-class中,我会为数组startDateTime和endDateTime中的每个单元格着色,但它仅适用于在这些数组中只有一个值的第一行,而第二行有两个不起作用。你有什么建议吗?提前致谢!

2 个解决方案

#1

Here is a basic plnkr

这是一个基本的plnkr

However, it's showing that you don't need to use $index. You already have access to the hour at the index you're on, because of the ng-repeat.

但是,它显示您不需要使用$ index。由于ng-repeat,您已经可以访问您所在索引处的小时数。

<td ng-repeat="hour in hours" ng-class="{BusyCell: hour >= item.startDateTime && hour <= item.endDateTime}">
</td>

#2

I think you are forgetting the use of "track by $index" inside your ng-repeat.

我认为你忘了在ng-repeat中使用“跟踪$ index”。

Example:

<div ng-repeat="n in [42, 42, 43, 43] track by $index">

Check out the docs. https://docs.angularjs.org/api/ng/directive/ngRepeat

查看文档。 https://docs.angularjs.org/api/ng/directive/ngRepeat

#1