CODEWITHSUNDEEP
javascripthtmlangularjs
Jigar Makwana
Jigar Makwana

Reputation: 227

show one div and hide others on button click in angularjs

I have four buttons and four div. Now, I want to show only one div at a time. It means, if I click the first button, only the first div should be visible and the others should be hidden.

I have searched a lot with no luck. Please help me. I have tried just to show as below:

html

<button  ng-click="showAbout();">About Page</button>
  <button ng-click="showhelp();">Help page</button>
  <button ng-click="showinfo();">Info Page</button>
  <button  ng-click="showref();">Refrence page</button>

  <div class="form-group" ng-show="showabout">
    <p>About page</p>
  </div>

  <div class="form-group" ng-show="showhelp" >
    <p>Help page</p>
  </div>

  <div class="form-group" ng-show="showinfo" >
    <p>Info</p>
  </div>

  <div class="form-group" ng-show="showref" >
    <p>Refrence</p>
  </div>

js

$scope.showabout = true;
$scope.showAbout = function () {
  $scope.showhelp = false;
  $scope.showinfo = false;
  $scope.showref = false;
};

$scope.showhelp = true;
$scope.showhelp = function () {
  $scope.showabout = false;
  $scope.showinfo = false;
  $scope.showref = false;
};

$scope.showinfo = true;
$scope.showinfo = function () {
  $scope.showabout = false;
  $scope.showhelp = false;
  $scope.showref = false;
};

$scope.showref = true;
$scope.showref = function () {
  $scope.showabout = false;
  $scope.showhelp = false;
  $scope.showinfo = false;
};

Upvotes: 3

Views: 22969

Answers (4)

Upalr
Upalr

Reputation: 2148

Use this: Fiddle

   <button  ng-click="show = 1">About Page</button>
   <button  ng-click="show = 2">Help page</button>
   <button  ng-click="show = 3">Info Page</button>
   <button  ng-click="show = 4">Refrence page</button>

    <div class="form-group" ng-show="show==1" >
       <p>About page</p>
    </div>

    <div class="form-group" ng-show="show==2" >
       <p>Help page</p>
    </div>

    <div class="form-group" ng-show="show==3" >
       <p>Info</p>
    </div>

    <div class="form-group" ng-show="show==4" >
       <p>Refrence</p>
    </div>

Upvotes: 6

Daniele Sassoli
Daniele Sassoli

Reputation: 898

Looks to me like this is the perfect use case for ng-switch. 

<div ng-switch on="visibleDiv">
  <div ng-switch-when="showhelp"><p>Help page</p></div>
  <div ng-switch-when="showinfo"><p>Infopage</p></div>
  <div ng-switch-when="showref"><p>Ref page</p></div>
  <div ng-switch-default><p>About page</p></div>
</div>

so, guessing you want the showabout div to be your default div, when you click on the button just change the visibleDiv variable to whatever div you want to be visible.

EDIT: here is a plunker. JS FIDDLE

Upvotes: 2

Eka Rudianto
Eka Rudianto

Reputation: 4755

You could try this one

this is the controller

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.divShow = "div1"

  $scope.show = function(arg) {
    $scope.divShow = arg;
  }
});

and this is the view

<button ng-click="show('div1')">show div 1</button>
<button ng-click="show('div2')">show div 2</button>
<button ng-click="show('div3')">show div 3</button>
<button ng-click="show('div4')">show div 4</button>

<div ng-show="divShow == 'div1'">div 1</div>
<div ng-show="divShow == 'div2'">div 2</div>
<div ng-show="divShow == 'div3'">div 3</div>
<div ng-show="divShow == 'div4'">div 4</div>

and this is the working plunkr that I've made

http://plnkr.co/edit/C9AEuT0p1rpFoCGpIkHz?p=preview

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

$scope.showabout = true;
            $scope.show==1 = function(){

                $scope.show==2 = false;
                 $scope.show==3 = false;
                  $scope.show==4 = false;
            };
               $scope.show==2 = true;
            $scope.show==2 = function(){

                $scope.show==1 = false;
                 $scope.show==3 = false;
                  $scope.show==4 = false;
            };
             $scope.show==3 = true;
            $scope.show==3 = function(){

                $scope.show==1 = false;
                 $scope.show==2 = false;
                  $scope.show==4 = false;
            };
             $scope.show==4 = true;
              $scope.show==4 = function(){

                $scope.show==1 = false;
                 $scope.show==2 = false;
                  $scope.show==3 = false;
            };

DEMO FIDDLE

Upvotes: 1

Related Questions