如何在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>