How To Hide Div2 When Button1 Is Clicked And Show Div1 Angular

I want when clicking on button Edit to show

and when click on button Add to hide

and display

Solution 1:

Instead of inline javascript, move your code to function and set visibility according to condition

<button ng-click="VisibilityChange('1')" value="myValue"id="mybtn">
  See users
</button>
<button ng-click="VisibilityChange('2')"id="editbtn">Edit</button>
<button ng-click="VisibilityChange('3')"id="addbtn">Add</button>`

Your controller

var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.hideShow2 = true;
        $scope.hideShow = false;
        $scope.hideShow1 = false;


    $scope.VisibilityChange= function(type){

      switch(type)
      {
      case"1":
        $scope.hideShow2 = true;
        $scope.hideShow = false;
        $scope.hideShow1 = false;
        change();
      break;
      case"2":
        $scope.hideShow2 = false;
        $scope.hideShow = true;
        $scope.hideShow1 = false;
      break;

      case"3":
        $scope.hideShow2 = false;
        $scope.hideShow = false;
        $scope.hideShow1 = true;
      break;

      }

    }

    });

Share