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

我有四个按钮和四个div。现在，我一次只想显示一个div。这意味着，如果我点击第一个按钮，只有第一个div应该可见，其他应该隐藏。显示一个div并隐藏其他按钮在angularjs中单击

我搜索了很多没有运气。请帮帮我。我曾尝试只是为了如下显示：

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>

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

来源

2015-10-01 Jigar Makwana

您与功能覆盖你的布尔值，因为你是他们分配到相同的名称。 – muenchdo

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

来源

2015-10-01 09:50:56

嗨..感谢和js的变化呢？ –

不需要更改js文件。它会正常工作。 –

嗨..但没有任何事情发生在按钮点击.. :( –

看起来对我来说，这是Ť他是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

来源

2015-10-01 09:52:01

你能不能编辑我的代码..我真的不能理解，因为我刚开始。 –

你可以试试这个：

$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

来源

2015-10-01 09:56:06

这只显示了四个div ..没有按钮.. !!! –

你可以试试这个一个

这是控制器

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

来源

2015-10-01 10:03:15

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

回答

相关问题