在AngularJS中，单击按钮时显示一个div并隐藏其他div。

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

- Jigar Makwana

---

你正在用函数覆盖你的布尔值，因为你将它们分配给了相同的名称。 - muenchdo

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>

- Upalr

---

嗨..谢谢，那JS的更改怎么样了？ - Jigar Makwana

嗨..但是在按钮点击时没有任何反应..:( - Jigar Makwana

哦...抱歉..我没有在我的js中进行更改..现在它像魔法一样工作了..谢谢兄弟..:) - Jigar Makwana

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 div成为默认div，在单击按钮时，只需将visibleDiv变量更改为您要显示的任何div即可。

编辑：这里是一个plunker。JS FIDDLE

- Daniele Sassoli

---

你能帮我修改一下我的代码吗？我刚开始学，真的不太理解。 - Jigar Makwana

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

演示代码片段

- Ivin Raj

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

- Eka Rudianto