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

Question

我有 4 个按钮。

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

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

例如 4 个按钮，

1. 第一

2. 第二

3. 第三

4. 第四

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

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

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

请检查以下示例 sn-p。

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>