顯示一個div並隱藏其他按鈕在angularjs中單擊

Question

我有四個按鈕和四個div。現在，我一次只想顯示一個div。這意味着，如果我點擊第一個按鈕，只有第一個div應該可見，其他應該隱藏。

我搜索了很多沒有運氣。請幫幫我。我曾嘗試只是爲了如下顯示：

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

Answer 1

使用此：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> 

Answer 2

看起來對我來說，這是Ť他是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> 

所以，猜測你想要的showabout格設置爲默認格，當你點擊該按鈕只是改變visibleDiv變量你想成爲什麼可見的div。

編輯：這裏是一個蹲點。 JS FIDDLE

Answer 3

你可以試試這個：

$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

Answer 4

你可以試試這個一個

這是控制器

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

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

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

，這是視圖

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

，這是工作plunkr，我已經做

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