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

Question

我有 4 个按钮。

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

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

例如4个按钮是，

第一
第二
第三
第四

它就像两个不同的切换按钮。我可以使用三元运算符。
当我点击第一个按钮时，我需要显示“第二个和第三个”按钮，我需要隐藏第一个按钮。所以现在只有第二个和第三个按钮应该显示。如果我再次点击第二个按钮，我需要显示第一个按钮，我需要隐藏第二个和第三个按钮。
点击第三个按钮后，我需要隐藏第三个按钮，需要显示第四个按钮。同样，如果我单击第 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>

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

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

html

javascript

angularjs