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>

两个按钮使用angular js显示隐藏

1 个答案: