Toggle the selection of a div by clicking a button in AngularJS with a toggle function

Question

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

I have several div elements on a webpage.

Each div contains a button!

When the button is clicked for the first time:
- The border color of the div will change to blue (indicating the div is now selected).
- The "ok" button will be hidden (leaving only the selected div visible).
Clicking anywhere inside the div for the second time will deselect it:
- The border will return to its original black color.
- The button will become visible again.
By clicking the select all button for the first time, the div should be selected. Clicking it again will unselect the div. (Toggle action)

How can I achieve this functionality using AngularJS.

function MainCtrl($scope) {
   $scope.addBackground = function () {
       angular.element(document.querySelector('.container')).addClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','none');
    };
};

.container{
  width:30%;
  height:100px;
  border:1px solid black;
  margin:10%;
}
button.btn.btn-primary{
  margin-top:10%;
  margin-left: 40%;
}
.selectedBorder{
  border: 3px solid blue;
}

<div id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCtrl">
   
<div class="container">
<button id="okBtn" class="btn btn-primary" ng-click="addBackground()">ok</button> 
</div>
</div>

javascript html css angularjs

Answer 1

Answer №1

To implement this functionality in AngularJs, you need to utilize ng-class and ng-show:

<div class="container" ng-class="{ 'selectedBorder': containerSelected }" ng-click="toggleContainer()">
    <button id="okBtn" class="btn btn-primary" ng-click="toggleButton($event)" ng-show="buttonVisible">ok</button> 
</div>

function MainCtrl($scope) {

   $scope.containerSelected = false;
   $scope.buttonVisible = true;
   $scope.toggleButton = function (e) {
       $scope.containerSelected = true;
       $scope.buttonVisible = false;
       e.stopPropagation();
    };
    $scope.toggleContainer = function (e) {
       if($scope.containerSelected){
           $scope.containerSelected = false;
           $scope.buttonVisible = true;
       }
    };

};

Check out the live demo: demo

Answer 2

To implement this functionality in AngularJs, you need to utilize ng-class and ng-show:

<div class="container" ng-class="{ 'selectedBorder': containerSelected }" ng-click="toggleContainer()">
    <button id="okBtn" class="btn btn-primary" ng-click="toggleButton($event)" ng-show="buttonVisible">ok</button> 
</div>

function MainCtrl($scope) {

   $scope.containerSelected = false;
   $scope.buttonVisible = true;
   $scope.toggleButton = function (e) {
       $scope.containerSelected = true;
       $scope.buttonVisible = false;
       e.stopPropagation();
    };
    $scope.toggleContainer = function (e) {
       if($scope.containerSelected){
           $scope.containerSelected = false;
           $scope.buttonVisible = true;
       }
    };

};

Check out the live demo: demo

Answer 3

Answer №2

To prevent event propagation, you can use $event.stopPropagation(); when triggering another event on the click of a box.

function MainCtrl($scope) {
   $scope.addBackground = function () {
       angular.element(document.querySelector('.container')).addClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','none');
    };
    
    $scope.removeBackground = function () {
       angular.element(document.querySelector('.container')).removeClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','initial');
    };
};

.container{
  width:30%;
  height:100px;
  border:1px solid black;
  margin:10%;
}
button.btn.btn-primary{
  margin-top:10%;
  margin-left: 40%;
}
.selectedBorder{
  border: 3px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

<div id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCtrl" ng-click="removeBackground()">
   
<div class="container">
<button id="okBtn" class="btn btn-primary" ng-click="addBackground(); $event.stopPropagation();">ok</button> 
</div>
</div>

Answer 4

To prevent event propagation, you can use $event.stopPropagation(); when triggering another event on the click of a box.

function MainCtrl($scope) {
   $scope.addBackground = function () {
       angular.element(document.querySelector('.container')).addClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','none');
    };
    
    $scope.removeBackground = function () {
       angular.element(document.querySelector('.container')).removeClass('selectedBorder');
      angular.element(document.getElementById('okBtn')).css('display','initial');
    };
};

.container{
  width:30%;
  height:100px;
  border:1px solid black;
  margin:10%;
}
button.btn.btn-primary{
  margin-top:10%;
  margin-left: 40%;
}
.selectedBorder{
  border: 3px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

<div id="myAngularApp" title="Angular Scope" ng-app ng-controller="MainCtrl" ng-click="removeBackground()">
   
<div class="container">
<button id="okBtn" class="btn btn-primary" ng-click="addBackground(); $event.stopPropagation();">ok</button> 
</div>
</div>

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

Answer №1

Answer №2

Similar questions

Remembering data in a lazy loaded AngularJs list

Enhancing a validation form with the 'onblur' event handler

What is preventing me from getting jQuery UI 1.8.20 dialog to function on JSFiddle?

What is the best way to utilize Typescript when making queries to Firebase?

The JavaScript for loop using .appendChild() is inserting the values of the final object, represented as [object object], into the HTML document

Creating a mapping in Node.js to write to a serial port and then retrieve the

The default export (imported as 'Vue') could not be located within the 'vue' module in Vue 3 and Laravel

Is there a way to directly display all the content in pagination format without a print preview option?

I am seeing the number 1 mysteriously popping up on my HTML page without my intervention

Is there a way to utilize variables from a source XML file to establish points on an SVG polygon?

Using a UUID as the default ID in a Postgres database system is a straightforward process

When using React, I noticed that adding a new product causes its attributes to change after adding another product with different attributes on the same page

How to convert table headings in Bootstrap-Vue.js

"Improvements required for the search and filter functionality in the JSON

Role-based dynamic layout

Utilizing Skeleton to create a cropped text button on an iPhone

When the dialog is opened, automatically set the focus on the text field inside

React Form with Conditional Input Options and Validation

Executing numerous xhttp.send requests within a single webpage

H3 Element Without ASP Causing Disruption in Page Layout