Angularjs在表格中的选定范围上应用颜色

Question

我有一个自定义滑块（HTML5自定义滑块），如下所示，我用它来选择其中一个表格单元格ng-click之前的小时数。单击表格单元格（上午11点）时，所选的小时数范围（3）应呈现为绿色，并以“选定”作为文本。

我如何实现这一目标？

    <tbody>
        <tr ng-repeat="hour in workhours">
            <td >{{hour}}:00 - {{hour+1}}:00</td>
            <td ng-class = "{'full' : !entry.HoursAvailable.includes(hour)}" 
                ng-click = "checkSlotAvailability(hour, jobLength, entry, data)"
                ng-repeat= "entry in data.calendar">
                    <span ng-if="entry.HoursAvailable.includes(hour)"> 
                        {{ data.response }}
                    </span>
                    <span ng-if="!entry.HoursAvailable.includes(hour)">
                        FULL
                    </span>
            </td>
        </tr>
    </tbody>

Answer 1

假设jobLength是滑块的值，您可以传递单击的行项的相应索引，并通过将其递增到jobLength

来捕获所有必需的索引。

<强> HTML ：

   <tbody>
<tr ng-repeat="hour in workhours" ng-init="selectedIndex=$index">
    <td>{{hour}}:00 - {{hour+1}}:00</td>
    <td ng-click="checkSlotAvailability(hour, jobLength, entry, data,selectedIndex,$index)" ng-repeat="entry in data.calendar" ng-class="{'full' : !entry.HoursAvailable.includes(hour),'selected':selectedIndex==selectedRow && $index<=selectedColumn+jobLength-1}">
        <span ng-if="entry.HoursAvailable.includes(hour)&&!checkSelected(selectedIndex, $index,jobLength) "> 
                    {{ data.response }}
                </span>
        <span ng-if="entry.HoursAvailable.includes(hour)&&checkSelected(selectedIndex, $index,jobLength) "> 
                    Selected
                </span>
        <span ng-if="!entry.HoursAvailable.includes(hour)">
                    FULL
                </span>
    </td>
</tr>

<强> JS

$scope.selectedArray=[];
$scope.checkSlotAvailability=function(hour, jobLength, entry, data,selectedIndex,index){
$scope.selectedRow=selectedIndex;
$scope.selectedColumn=index;

}

<强> CSS

.selected{
 background-color:green;
}

您可以编写一个函数来评估ng-class

的逻辑

 $scope.checkSelected = function(selectedIndex, index,jobLength) {
     if (selectedIndex == $scope.selectedRow && (index <= ($scope.selectedColumn + jobLength - 1))) 
       return true
     else 
       return false;
 }