AngularJS: How to unselect a span when selecting another


Tags: javascript,html,css,angularjs

Problem :

I have a list of things that I display with ngrepeatthat when they are clicked, produce an additional list of things pertaining to the element selected. My intent is to have the clicked element's background change color so as to show it selected. My issue is when I select another element, they both show as selected. Here is my code:

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

As noted before, the first click event works great. bSelection is my css class that has the changing of the background color. Again my issue is that once another element is clicked, the previous doesn't "unselect" per se.

Question: How do I un-give a class to an element when another element has been selected so that only one shows as highlighted at a time?



Solution :

Set and check selection in concrete element:

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

UPDATE

for selected just one - save not bool, but index selected element. ng-repeat create own scope, so on click selection created for each item. you can use $parent to create one selection in 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>


    CSS Howto..

    How do i move an image from left to right and right to left in javascript for infinite time?

    How do you modify the modal height without removing the slide effect in Bootstrap Twitter?

    how to make NGINX serve static content like .js, .css, .html?

    How can I vertically align two floated divs?

    How to make my buttons responsive?

    How do you set the filepath for css in hiccup with Clojure using the html5 tag?

    How to add link without ruining transition CSS/HTML

    CSS/Javascript: How to draw minimal border around an inline element?

    How to override nth-child

    How do I specify another width for newly added divs in javascript

    How to vertically align inline-block divs without vertical spaces using CSS?

    How to style unordered lists in CSS as comma separated text

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    JS manipulation on CSS and how it result on page rendering

    How to remove space after a colon in CSS with Sublime Text 3?

    How to set the specific prefix for file-loader in webpack?

    How can I get 3 lines of text on the same line and still be able to position them?

    How to change fill color of SVG on click when it's used as a background image?

    How to position an image to the right of a center aligned title with HTML & CSS

    How to get element by its partial class name CSS

    How to show Only 4 slides in a row using Bxslider

    How to make div height fit the content using css

    how to change default Bootstrap link hover color to custom color? [closed]

    How to have background between two handles of jQuery Slider using css gradient

    How to make section element in css to full width

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How to make diagonal div

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How to get rid of the bottom shadow in label of the css tabs

    How to improve the rendering of my HTML/CSS button?