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

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Having problems with route navigation in Angular/Rails when using multiple layouts

Retrieve the XML document and substitute any occurrences of ampersands "&" with the word "and" within it

Unable to access the 'fn' property of undefined in Handlebars causing a TypeError

Implementing a persistent header on a WordPress site with Beaver Builder

Looking for a quick guide on creating a basic RESTful service using Express.js, Node.js, and Mongoose?

Having trouble finding module: Unable to locate 'fs' - yet another hurdle with NextJS

Trouble with updating Angular Js ng-model within a nested function

Is it possible to consolidate React and React-DOM into a unified library instead of having them separate?

Struggling with injecting $q into AngularJS?

Tips for adjusting image and div sizes dynamically according to the window size

What could be the reason for this XSS script not making a request to my server?

Unveiling the Power of KnockoutJS: Displaying HTML Content and Populating

Building a collapsible toggle feature with an SVG icon using HTML and CSS

Why isn't v-model functioning properly in Vue?

Tips for modifying JSON property names during the parsing process

Issue with passing parameter values in MVC Html.ActionLink

Webpack returns an undefined error when attempting to add a JavaScript library

Utilize the toString function along with the substring method within an ejs template

changing pictures with jquery