I am working on maintaining the "active" class on a clicked widget tile until another sibling is clicked, regardless of any other click action on the page. While this functionality works within the widget itself, if the user clicks elsewhere on the page, the active state is lost. How can I prevent this from happening?
For the tile:
<div ng-click="tile.clickButton(0)">ng-class="clickButton ? 'active' : '' "
as well as
ng-class="{'active': clickButton = true}"
and
ng-class="showRespectiveEvent ? 'active' : '' "
(where `showRespectiveEvent` triggers visibility of another widget on the page)
I have also tried:
resource for adding and removing classes in AngularJS using ng-click
approaches for adding multiple functions in one ng-click event
methods to set the active class on ng-click
despite trying various solutions, nothing seems to be effective...
Below is the simplified code for displaying widgets on the page (stripped down for privacy reasons):
<div >
<div>
<ng-include src="'Widget Tile Page'"></ng-include>
</div>
<!-- This is the widget that the tiles hide/show when clicked -->
<div class="row">
<div ng-if="thisPageCtrl.showRespectiveEvent"></div>
</div>
</div>
// Code for Tile Widget Page:
<div ng-controller="tile as wtl">
<div class="row>
<div class="tile" ng-click="wtl.clickButton(0)">
<div>{{wtl.someButtons[0].title}}</div>
<div>{{wtl.someButtons[0].data}}</div>
</div>
</div>
</div>
<script>
$scope.clickButton = clickButton
function clickButton(iIndex) {
var btn = $scope.someButtons[iIndex];
$rootScope.$emit("highLight", btn);
}
</script>
// CSS:
.tile {
color: purple;
border: 1px solid purple;
}
.tile.active {
font-weight: 900;
color: deeppink;
border: 1px solid deeppink
}
The desired outcome is for the active class to persist unless another tile within the widget is clicked. Currently, clicking elsewhere on the page removes the active class.