Two buttons show hide using angular js

Question

I need show, hide using two buttons. my requirement is, when click -> Button A , it should be hide, Button B should be show when click -> Button B , it should be hide, Button A should be show.

i am tying to do it with some other conditions. please check my code.

    <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>

if you can do this using ng-if attribute, that's good.

why not just something more clear like: <button class="a" ng-if="condition"></button> <button class="b" ng-if="!condition"></button>and then update only the condition accordingly — Naxos84
– Naxos84, Commented Jul 10, 2019 at 8:31

antonku · Accepted Answer · 2019-07-10 11:34:59Z

You can have a variable that represents the current condition and change it's value to the opposite on click.

Of course you will need to adjust the condition to your application.

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>

Collectives™ on Stack Overflow

Two buttons show hide using angular js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related