Highlight multiple selected Table Data (<td></td>) in ngRepeat - angularjs

Question

There is a lot of examples about select multiples row in ngRepeat, but what I need is highligth multiple Table Data on click. This is what I have in my Controller:
app.controller('CalendarCtrl', function($scope, Calendar){
$scope.week = ['Dom','Lun','Mar','Mie','Jue','Vie','Sab']
$scope.hours = ['6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];
$scope.idSelectedDayActive = null;
$scope.idSelectedHourActive = null;
$scope.setSelected = function (day, hour) {
$scope.idSelectedDayActive = day;
$scope.idSelectedHourActive = hour;
};
This is my View
<table class="table table-bordered">
<thead>
<th scope="col" title="Monday"><i class="fa fa-clock-o" aria-hidden="true"></i></th>
<th ng-repeat="d in week" scope="col">{{d}}</th>
</thead>
<tbody>
<tr ng-repeat="h in hours">
<td class="col">{{h}}</td>
<td ng-repeat="d in week"
ng-click="setSelected(d, h)"
ng-class="{'calendar-element-active' : d === idSelectedDayActive && h === idSelectedHourActive, 'calendar-element-disable' : d === idSelectedDayDisable && h === idSelectedHourDisable}">
</td>
</tr>
</tbody>
</table>
This are my CSS classes:
.table tbody>tr>td.calendar-element-active, .table tbody>tr>td.calendar-element-active {
background-color: #00d0d1;
border: 1px solid #fff;
}
.table tbody>tr>td.calendar-element-disable {
background-color: #fff;
}
And a Plunker DEMO

Answer 1

Here You can do it like this, The Js
'use strict';
var app = angular.module("app", []);
app.controller('CalendarCtrl', function($scope){
$scope.week = ['Dom','Lun','Mar','Mie','Jue','Vie','Sab']
$scope.hours = ['6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];
$scope.idSelectedDayActive = null;
$scope.idSelectedHourActive = null;
$scope.selectedCells = [];
$scope.setSelected = function (day, hour) {
for(let selectedCell in $scope.selectedCells){
if($scope.selectedCells[selectedCell].day == day &&
$scope.selectedCells[selectedCell].hour == hour){
$scope.selectedCells.splice(selectedCell,1);
return ;
}
}
$scope.selectedCells.push({'day':day,'hour':hour});
};
$scope.check = function(day,hour){
for(let selectedCell of $scope.selectedCells){
if(selectedCell.day == day && selectedCell.hour == hour)
return true
}
return false
}
});
And in Html
<tr ng-repeat="h in hours">
<td class="col">{{h}}</td>
<td ng-repeat="d in week" ng-click="setSelected(d, h)"ng-class="{'calendar-element-active' : check(d,h), 'calendar-element-disable' : d === idSelectedDayDisable && h === idSelectedHourDisable}">
</td>
</tr>
Basically it is your logic only, just instead of a single selected, you have to use array and make it array of selected cells
Edit :- For removing the selected item, the setselected function is just checking if the cell is currently selected.. if it selected then it deselects and returns if the loop goes through without returning a new cell is selected