JavaScript / AngularJS - Clean Boolean Toggling

Question

I have a group of boolean variable that toggles other variables to false if flagged as true.

Is there a clean pattern to this approach? Considering that the number of boolean variables might 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>

You might want to add an angular tag too...as there might be something built in — Asons
– Asons, Commented Apr 5, 2018 at 10:06

deceze · Accepted Answer · 2018-04-05 10:06:27Z

4

Depending on how these are used there may be many solutions, but it seems insane to have several interdependent variables. You should probably express the current state using one variable that can hold more than 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>

answered Apr 5, 2018 at 10:06

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexandre Annic · Accepted Answer · 2018-04-05 10:08:39Z

3

Why don't simply do something like this:

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>

answered Apr 5, 2018 at 10:08

Alexandre Annic

10.9k6 gold badges44 silver badges54 bronze badges

Comments

wayneOS · Accepted Answer · 2018-04-05 10:40:27Z

1

'You could use an array as container for your boolean and then use just one function to switch it all. Here is an 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>

edited Apr 5, 2018 at 10:40

answered Apr 5, 2018 at 10:08

wayneOS

1,4251 gold badge14 silver badges20 bronze badges

4 Comments

Durga Over a year ago

$scope.keys is invalid array.

wayneOS Over a year ago

@Durga yes. sorry. Forgot to change the semicolons into commata. Thanks

wayneOS Over a year ago

@Aleksey. wow yes. Not my day. Too much PHP and json_encode (). Now it is an JS-object. Thanks again.

Aleksey Solovey Over a year ago

@wayneOS well... with A is {{a}} your $scope.a is not defined, so it's empty. I believe it should be like A is {{keys.a}} or something

Houssein Zouari · Accepted Answer · 2018-04-05 11:02:50Z

0

You can try this i am not sure what's the next step for you but it can be 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>

answered Apr 5, 2018 at 11:02

Houssein Zouari

7226 silver badges19 bronze badges

Collectives™ on Stack Overflow

JavaScript / AngularJS - Clean Boolean Toggling

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related