Unselecting a span in AngularJS: Switching selection to another span

Question

Unselecting a span in AngularJS: Switching selection to another span

Whenever I click on an item from my list displayed using ngrepeat, it generates another list specific to the selected element. My goal is to change the background color of the clicked element to indicate it has been selected. However, the problem arises when multiple items appear selected at once even after selecting a new one. Below is the code snippet:

<div class="breakdownRow pointer" ng-class="{bSelection: selection}" ng-click="selection=true" ng-repeat="m in masterList">
    <span class="areaTag">{{m.area}}</span>
    <span class="storeNumTag" ng-repeat="v in m.valueList track by $index">{{v.toLocaleString()}} </span>
</div>

The first click event works fine and changes the background color using the CSS class bSelection. However, the issue persists as previously selected elements remain highlighted even after selecting a new one.

Question: Is there a way to remove the highlighting from a previously selected element when a new element is chosen so that only one remains highlighted at any given time?

javascript html css angularjs

Answer 1

Answer №1

Manipulate and verify the selection within a specific element:

<div class="breakdownRow pointer" ng-class="{bSelection: m.selection}" ng-click="m.selection=true" ng-repeat="m in masterList">

LATEST UPDATE

When only one item is selected - store the index value of the selected element instead of a boolean. Each ng-repeat creates its own scope, so when clicking on an item, a new selection property is created for that particular item. To maintain a single selection across all items, use $parent to create the selection in the parent scope.

<div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">

angular.module('app', [])
  .controller('controller', function($scope) {
    $scope.masterList = [1, 2, 3, 4, 5, 6, 7, 8];
  });

.breakdownRow {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
.bSelection {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="controller">
  <div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">
    {{m}}
  </div>
</div>

Answer 2

Manipulate and verify the selection within a specific element:

<div class="breakdownRow pointer" ng-class="{bSelection: m.selection}" ng-click="m.selection=true" ng-repeat="m in masterList">

LATEST UPDATE

When only one item is selected - store the index value of the selected element instead of a boolean. Each ng-repeat creates its own scope, so when clicking on an item, a new selection property is created for that particular item. To maintain a single selection across all items, use $parent to create the selection in the parent scope.

<div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">

angular.module('app', [])
  .controller('controller', function($scope) {
    $scope.masterList = [1, 2, 3, 4, 5, 6, 7, 8];
  });

.breakdownRow {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
.bSelection {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="controller">
  <div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">
    {{m}}
  </div>
</div>

Unselecting a span in AngularJS: Switching selection to another span

Answer №1

Similar questions

Difficulty establishing audio calls with Internet Explorer using PeerJS

The image tag fails to appear on the browser when the client attempts to access it

What does the reportProgress function do in HTTP services with JavaScript?

Radio buttons with multiple levels

What category does Ajax fall under in terms of scripting: client-side or server-side

Issue locating the bottom of the scroll bar

Avoid triggering child states in ui-router

What is the best way to eliminate duplicate items in JavaScript?

How come my JavaScript regular expression doesn't function properly when applied to elements in an array?

Using javascript to overlay and position many images over another image

What steps can I take to decrease the padding of this footer?

javascript with python

Apply a dual-color gradient background vertically

Activate the radio button upon page load in angularjs

Switching Up Poster Images in Chrome with Afterglow HTML5 Video on Hover

Error: An unexpected identifier was encountered while executing my function

I keep encountering the following issue: "It seems that the file requested at /images/crown.png is not recognized as a valid image, as it was received as text/html; charset=utf-8."

Updating the color scheme of the selected nav-item and showcasing the corresponding page in relation to the navbar selection

ReactJS component's function become operational only after double tapping

React: troubleshooting error of empty object displayed by console log