Две кнопки показывают скрыть, используя угловой JS

Question

Мне нужно показать, скрыть с помощью двух кнопок.мое требование заключается в том, чтобы при нажатии -> кнопка A, она должна быть скрыта, кнопка B должна отображаться при нажатии -> кнопка B, она должна быть скрыта, кнопка A. должна отображаться.

я пытаюсь сделатьэто с некоторыми другими условиями.пожалуйста, проверьте мой код.

    <button class="btn btn-primary btn-flat pull-right"
                ng-if='(detailCustomter.clientCustomer.customerFlag===false) && accessRights.includes("FLAG_CUSTOMER")'>
            <i class="ion ion-flag"></i> Button A
        </button>

        <button class="btn btn-danger btn-flat pull-right"
                ng-if='(detailCustomter.clientCustomer.customerFlag===true ) && accessRights.includes("UNFLAG_CUSTOMER")'>
            <i class="ion ion-flag"></i> Button B
        </button>

, если вы можете сделать это с помощью атрибута ng-if, это хорошо.

Answer 1

У вас может быть переменная, которая представляет текущий condition и при щелчке изменить ее значение на противоположное.

Конечно, вам нужно будет настроить condition для вашего приложения.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.condition = true;
  $scope.toggle = function() {
    $scope.condition = !$scope.condition;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <button class="btn btn-primary btn-flat pull-right"
                ng-click="toggle()"
                ng-if="condition">
            <i class="ion ion-flag"></i> Button A
        </button>
        <button class="btn btn-danger btn-flat pull-right"
                ng-click="toggle()"
                ng-if="!condition">
            <i class="ion ion-flag"></i> Button B
        </button>
    </div>
</div>