如何在angularjs中单击隐藏和显示按钮？

Question

我有4个按钮。

• 最初只会显示一个按钮，其余三个按钮应该隐藏。

我完成了示例小提琴中的场景，但该代码不正确。 我想使用三元运算符并需要使用切换来简化。

例如4个按钮是，

1. 第一的

2. 第二

3. 第三

4. 第四

• 它就像两个不同的切换按钮。 我可以使用三元运算符。

• 当我点击第一个按钮时，我需要显示“第二个和第三个”按钮，我需要隐藏第一个按钮。 所以现在应该只显示第二个和第三个按钮。 如果我再次单击第二个按钮，我需要显示第一个按钮，而我需要隐藏第二个和第三个按钮。

• 单击第三个按钮后，我需要隐藏第三个按钮并需要显示第四个按钮。 同样，如果我单击第四个按钮，它应该更改为第三个按钮。

请检查下面的示例代码段。

 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

您可以通过将要显示的按钮存储在数组中来实现：

 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>

---

或者，您也可以将切换函数存储在对象数组中，并将其与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>