JavaScript / AngularJS - Efficient Boolean Switching

Question

JavaScript / AngularJS - Efficient Boolean Switching

My group of Boolean variables can toggle other variables to false when set to true.

I am looking for a clean pattern for this approach, especially since the number of boolean variables may increase.

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.a = true;
    $scope.b = false;
    $scope.c = false;

    $scope.toggleA = function() {
      $scope.a = true;
      $scope.b = false;
      $scope.c = false;
    }
    
    $scope.toggleB = function() {
      $scope.b = true;
      $scope.a = false;
      $scope.c = false;
    }
    
    $scope.toggleC = function() {
      $scope.c = true;
      $scope.b = false;
      $scope.a = false;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-click="toggleA()">A is {{a}}</button>
  <button ng-click="toggleB()">B is {{b}}</button>
  <button ng-click="toggleC()">C is {{c}}</button>
</div>

javascript angularjs

Answer 1

Answer №1

When considering the various applications of these variables, it becomes clear that having multiple interdependent variables is not practical. It would be more efficient to represent the current state using a single variable that can accommodate more than just two values:

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.current = 'a';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-click="current = 'a'">A is {{ current == 'a' }}</button>
  <button ng-click="current = 'b'">B is {{ current == 'b' }}</button>
  <button ng-click="current = 'c'">C is {{ current == 'c' }}</button>
</div>

Answer 2

When considering the various applications of these variables, it becomes clear that having multiple interdependent variables is not practical. It would be more efficient to represent the current state using a single variable that can accommodate more than just two values:

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.current = 'a';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-click="current = 'a'">A is {{ current == 'a' }}</button>
  <button ng-click="current = 'b'">B is {{ current == 'b' }}</button>
  <button ng-click="current = 'c'">C is {{ current == 'c' }}</button>
</div>

Answer 3

Answer №2

Have you considered trying a solution like this instead:

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.x = 'a';

    $scope.toggle = function(x) {
      $scope.x = x;          
    }        
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-click="toggle('a')">A is {{x === 'a'}}</button>
  <button ng-click="toggle('b')">B is {{x === 'b'}}</button>
  <button ng-click="toggle('c')">C is {{x === 'c'}}</button>
</div>

Answer 4

Have you considered trying a solution like this instead:

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.x = 'a';

    $scope.toggle = function(x) {
      $scope.x = x;          
    }        
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-click="toggle('a')">A is {{x === 'a'}}</button>
  <button ng-click="toggle('b')">B is {{x === 'b'}}</button>
  <button ng-click="toggle('c')">C is {{x === 'c'}}</button>
</div>

Answer 5

Answer №3

'An effective way to manage boolean values is by using an array as a container and creating a single function to toggle them. Take a look at the following example.

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.keys = {
      a: true,
      b: false,
      c: false
    };

    $scope.toggle = function(change_key) {
      for (var key in $scope.keys)
        if ($scope.keys.hasOwnProperty(key))
          if (key === change_key)
            $scope.keys[key] = true;
          else
            $scope.keys[key] = false;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-click="toggle('a')">A is {{keys.a}}</button>
  <button ng-click="toggle('b')">B is {{keys.b}}</button>
  <button ng-click="toggle('c')">C is {{keys.c}}</button>
</div>

Answer 6

'An effective way to manage boolean values is by using an array as a container and creating a single function to toggle them. Take a look at the following example.

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.keys = {
      a: true,
      b: false,
      c: false
    };

    $scope.toggle = function(change_key) {
      for (var key in $scope.keys)
        if ($scope.keys.hasOwnProperty(key))
          if (key === change_key)
            $scope.keys[key] = true;
          else
            $scope.keys[key] = false;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-click="toggle('a')">A is {{keys.a}}</button>
  <button ng-click="toggle('b')">B is {{keys.b}}</button>
  <button ng-click="toggle('c')">C is {{keys.c}}</button>
</div>

Answer 7

Answer №4

If you're not sure what your next step should be, give this a try as it might offer a good solution.

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.keys = [ 
             {"name":"a","value":true},
             {"name":"b","value":false},
             {"name":"c","value":false}
    ];

    $scope.toggle = function(key) {
       key.value = !key.value;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-repeat="key in keys" ng-click="toggle(key)">{{key.name}} is {{key.value}}</button>
</div>

Answer 8

If you're not sure what your next step should be, give this a try as it might offer a good solution.

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.keys = [ 
             {"name":"a","value":true},
             {"name":"b","value":false},
             {"name":"c","value":false}
    ];

    $scope.toggle = function(key) {
       key.value = !key.value;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <button ng-repeat="key in keys" ng-click="toggle(key)">{{key.name}} is {{key.value}}</button>
</div>

JavaScript / AngularJS - Efficient Boolean Switching

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript method overloading involves defining multiple functions with the same name

Displaying data stored in a database using JSON format with Ember

Personalizing the dimensions of audio.js

Can a synchronous loop be executed using Promises in any way?

Obtaining connection data in jsPlumb can be accomplished through a variety of

Is the jqm flipswitch with the label on the left and the switch on the right?

Encountering challenges with managing global variables in my Node.js application

Purge stored events from BehaviorSubject in Angular2 using Observables as they are consumed

Can you please explain the purpose of the state object in the setSearchParams hook of react-router-dom v6

Passing image source from parent component to child component in Vue.js

Managing both clicking and hovering events on a single element, ensuring that the popup modal remains open as long as it is being hovered over

How to mock nested functions within sinon

What are the consequences of excluding a callback in ReactJs that may lead to dysfunctionality?

Continue iterating only when all promises have been resolved

The issue with the functionality of position absolute in CSS when used with JavaScript

An easy way to switch animations using CSS display:none

Using HTML5 Canvas with Firefox 4: How to Retrieve Click Coordinates

Troubleshooting Problem with Materializecss Datepicker Displaying Dates

Ways to showcase a website within an HTML document using a URL?

javascript The unchecking of a checkbox is not functioning