In my project, I have a table that showcases various details and allows users to select certain rows. Some of these rows have child rows which can also be selected.
The requirement is for the parent rows to be selectable only if they do not have any children. If they do have child rows, then only the child rows should be selectable. Essentially, it's a 'select-only-one' type of table.
The current setup functions correctly in terms of row selection. However, there's a need to disable hover functionality on parent rows that are not selectable.
If you want to see how this works, check out this live example: http://plnkr.co/edit/Z0cgHKx2qxpekEE36O1K?p=preview
Below is a snippet from the controller showcasing part of the code:
scope.parentSelected = [];
$scope.childSelected = [];
$scope.getParentDetails = function(parentObj) {
if(!parentObj.jobs || parentObj.jobs.length === 0) {
nonSelectOtherRows();
var index = $scope.pro.indexOf(parentObj);
$scope.parentSelected[index] = !$scope.parentSelected[index];
// get details for parent row using parentObj
console.log(parentObj);
}
};
$scope.getChildDetails = function(parentObj, childObj) {
nonSelectOtherRows();
var parentIndex = $scope.pro.indexOf(parentObj);
var childIndex = parentObj.jobs.indexOf(childObj);
$scope.childSelected[parentIndex] = [];
$scope.childSelected[parentIndex][childIndex] = !$scope.childSelected[parentIndex][childIndex];
// get details for parent and child rows using parentObj and childObj.
// childObj is the childRow selected
console.log(parentObj);
console.log(childObj);
}