If clicked, give active class until another element is clicked, then give the second element active class and remove the active class from the first

Question

I am attempting to keep the class "active" on the clicked widget tile until another of its siblings is clicked (regardless of any other click action on the page). This works within the widget, but if the user clicks another element on the page, the active state is removed. How can I prevent this?

On the tile: <div ng-click="tile.clickButton(0)"> I've attempted:

ng-class="clickButton ? 'active' : '' "

and

ng-class="{'active' : clickButton = true}"

and

ng-class="showRespectiveEvent ? 'active' : '' "

(showRespectiveEvent causes an ng-include to initiate visibility of another widget on the page)

I've also tried:

adding and removing classes in angularJs using ng-click

How to add many functions in ONE ng-click?

How to set active class on ng-click?

and many other solutions, but nothing seems to be working...

Code for widgets to be displayed on the page (very simplified for privacy):

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

I'm expecting the active class to stay unless another of the tiles in the widget is clicked. The active class is being removed if the user clicks on another element on the page.

Can you edit your question to show what `wtl.clickButton(0)` actually does? What does that function look like? — cjl750, Aug 14 '19 at 04:07
Ok, I added the function for wtl.clickButton. Thank you for taking a look! — KarinaKreative, Aug 14 '19 at 15:19
Thank you KMims, this is just an example. The actual code has the missing quote. — KarinaKreative, Aug 19 '19 at 22:13

score 0 · Accepted Answer · answered Aug 15 '19 at 02:50

Hopefully this gets you going in the right direction:

(function() {
  var app = angular.module('tileApp', []);

  app.controller('TileController', function() {
    this.activeTile = null;
    this.someButtons = [{
      title: 'title1',
      data: 'data1',
    }, {
      title: 'title2',
      data: 'data2',
    }, {
      title: 'title3',
      data: 'data3',
    }];;

    this.clickButton = function(index) {
      this.activeTile = index;
    }
  });
})();

.tileContainer {
   display: grid;
   gap: 20px;
   grid-template-columns: repeat(3, 1fr);
}

.tile {
   color: purple;
   border: 1px solid purple;
   padding: 20px;
   cursor: pointer;
}

.tile.active {
  font-weight: 900;
  color: deeppink;
  border: 1px solid deeppink;
  background: pink;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  </head>
  <body ng-app="tileApp">
    <center><h1>Active Tile</h1></center>
    <div class="tileContainer" ng-controller="TileController as tile">
        <div class="tile" ng-click="tile.clickButton($index)" ng-repeat="button in tile.someButtons" ng-class="tile.activeTile === $index ? 'active' : ''">
           <div>{{button.title}}</div>
           <div>{{button.data}}</div>
        </div>
      </div>
  </body>
</html>

If clicked, give active class until another element is clicked, then give the second element active class and remove the active class from the first

1 Answers1