CODEWITHSUNDEEP
javascriptangularjs
colin_dev256
colin_dev256

Reputation: 815

Angularjs apply color on selected range in table

I have a custom slider (HTML5 custom slider) and as seen below, I use it to select a number of hours before ng-click'ing on one of the table cells. On clicking a table cell (11 am) the selected range of hours(3) should render as green with 'Selected' as text.

enter image description here

How do I achieve this?

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

Upvotes: 1

Views: 223

Answers (1)

Vivz
Vivz

Reputation: 6630

Assuming jobLength is the value from the slider, you can pass the corresponding index of the row item which is clicked and capture all the required index by incrementing it till 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;
}

You can maybe write a function to evaluate the logic for your ng-class

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

Upvotes: 1

Related Questions