Basic Angular 1.4.0
HTML
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-controller="AppCtrl">
<table>
<tr ng-repeat="checkbox in groupOfCheckboxes track by $index">
<td ng-repeat="data in checkbox.RowValues track by $index">
<span ng-if="data.show" ng-click="setBinary(data.td)" ng-class="data.isActive ? 'active' : ''">{{data.td}}</span>
</td>
</tr>
</table>
</div>
CSS
td span{margin-right:20px;}
.active {
color: red;
}
JavaScript
var app = angular.module('starter', []);
app.controller('AppCtrl', function ($scope) {
$scope.groupOfCheckboxes = [
{ Row: "1",
RowValues: [
{td:"1", show: true},
{td:"2", show: true},
{td:"3", show: true},
{td:"4", show: true},
{td:"5", show: true}
]
},
{ Row: "2",
RowValues: [
{td:"6", show: false},
{td:"7", show: false},
{td:"8", show: false},
{td:"9", show: true},
{td:"10", show: false}
]
},
{ Row: "3",
RowValues: [
{td:"11", show: false},
{td:"12", show: false},
{td:"13", show: true},
{td:"14", show: true}
]
},
{ Row: "4",
RowValues: [
{td:"15", show: false},
{td:"16", show: false},
{td:"17", show: false},
{td:"18", show: true}
]
}
]
$scope.setActiveSelectedItem = function() {
return $scope.groupOfCheckboxes[i].RowValues[j].isActive = !$scope.groupOfCheckboxes[i].RowValues[j].isActive;
}
$scope.setActivePrevNext = function (arr) {
let c;
arr.RowValues.forEach(e => {
e.isActive = !e.isActive; c = e.isActive;
});
index = $scope.groupOfCheckboxes.findIndex(x => x.Row == arr.Row);
childrenIndex = index + 1;
if ($scope.groupOfCheckboxes[childrenIndex] !== undefined) {
$scope.groupOfCheckboxes[childrenIndex].RowValues.forEach(e => {
e.isActive = c;
})
};
}
$scope.setBinary = function (id) {
$scope.groupOfCheckboxes.forEach(e => {
e.RowValues.forEach(item => {
if (item.td == id) $scope.setActivePrevNext(e);
})
});
}
});