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,

1. first

2. Second

3. Third

4. 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>

Answer 1

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>