How to hide and show buttons on click of that in angularjs?

Question

I have 4 buttons.

Initially only one button will be displayed and remaining three should get hide.

I done the scenario in the example fiddle, but that code is not proper. I want to use ternary operator and need to simplify using toggle.

For example 4 buttons are,

first
Second
Third
Fourth

It is like two different toggle buttons. I can use ternary operator.
When I click the first button, I need to show "second and Third" buttons and I need to hide the first button. So now only second and third button should show. If I click again the second button i need to show the first button and i need to hide the second and third button.
After click on 3rd button, i need to hide the third button and need to show the fourth button. Again if i click 4th button it should change as third button.

Please check the below example snippet.

angular.module("app", [])
  .controller("ctrl", ctrl);

function ctrl($scope) {
  $scope.showFirst = true;
  $scope.showSecond = false;
  $scope.showThird = false;
  $scope.showFourth = false;

  $scope.toggle1 = function() {
    $scope.showFirst = false;
    $scope.showSecond = true;
    $scope.showThird = true;
    $scope.showFourth = false;
  };
  $scope.toggle2 = function() {
    $scope.showFirst = true;
    $scope.showSecond = false;
    $scope.showThird = false;
    $scope.showFourth = false;
  };
  $scope.toggle3 = function() {
    $scope.showFirst = false;
    $scope.showSecond = true;
    $scope.showThird = false;
    $scope.showFourth = true;
  };
  $scope.toggle4 = function() {
    $scope.showFirst = false;
    $scope.showSecond = false;
    $scope.showThird = true;
    $scope.showFourth = false;
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button ng-show="showFourth" ng-click="toggle4()">test 4</button>
  <button ng-show="showThird" ng-click="toggle3()">test 3</button>
  <button ng-show="showSecond" ng-click="toggle2()">test 2</button>
  <button ng-show="showFirst" ng-click="toggle1()">test 1</button>
</div>

Ruben Helsloot · Accepted Answer · 2020-10-14 10:52:35Z

You could do it by storing which buttons you'd like to show in an array:

angular.module("app", [])
  .controller("ctrl", ctrl);

function ctrl($scope) {
  $scope.showButtons = [0];

  $scope.toggle1 = function() {
    $scope.showButtons = [1, 2];
  };
  $scope.toggle2 = function() {
    $scope.showButtons = [0];
  };
  $scope.toggle3 = function() {
    $scope.showButtons = [1, 3];
  };
  $scope.toggle4 = function() {
    $scope.showButtons = [2];
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button ng-show="showButtons.includes(3)" ng-click="toggle4()">test 4</button>
  <button ng-show="showButtons.includes(2)" ng-click="toggle3()">test 3</button>
  <button ng-show="showButtons.includes(1)" ng-click="toggle2()">test 2</button>
  <button ng-show="showButtons.includes(0)" ng-click="toggle1()">test 1</button>
</div>

Alternatively, you could also store the toggle functions inside an array of objects and use it with ng-repeat:

angular.module("app", [])
  .controller("ctrl", ctrl);

function ctrl($scope) {
  $scope.buttons = [
    {
      id: 'test 1',
      fn: function() {
        showButtons([1, 2]);
      },
      show: true,
    },
    {
      id: 'test 2',
      fn: function() {
        showButtons([0]);
      },
      show: false,
    },
    {
      id: 'test 3',
      fn: function() {
        showButtons([1, 3]);
      },
      show: false,
    },
    {
      id: 'test 4',
      fn: function() {
        showButtons([2]);
      },
      show: false,
    },
  ];

  function showButtons(show) {
    $scope.buttons.forEach(function(btn, i) {
      btn.show = show.includes(i);
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button ng-repeat="button in buttons" ng-show="button.show" ng-click="button.fn()">
    {{button.id}}
  </button>
</div>

Collectives™ on Stack Overflow

How to hide and show buttons on click of that in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related