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