Javascript 在angularjs中单击按钮时显示一个div并隐藏其他div

show one div and hide others on button click in angularjs

提问by Jigar Makwana

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

我有四个按钮和四个div. 现在，我想div一次只展示一个。这意味着，如果我单击第一个按钮，则只有第一个按钮div应该可见，而其他按钮应该隐藏。

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

我已经搜索了很多没有运气。请帮我。我试图只是显示如下：

html

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

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

回答by Upal Roy

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>

回答by Daniele Sassoli

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

在我看来，这是 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.

因此，猜测您希望 showabout div 是您的默认 div，当您单击按钮时，只需将 visibleDiv 变量更改为您想要可见的任何 div。

EDIT: here is a plunker. JS FIDDLE

编辑：这是一个plunker。JS小提琴

回答by Ivin Raj

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

演示小提琴

回答by Eka Rudianto

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

这是我制作的工作 plunkr

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

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