Question

我有四个按钮和四个div。现在，我想一次只显示一个div。这意味着，如果我点击第一个按钮，则只有第一个div应该可见而其他<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>应该被隐藏。

我搜索了很多，没有运气。请帮我。我试过如下显示：

HTML

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

JS

Swift

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 div成为你的默认div，当你点击按钮时，只需将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>

这是我制作的工作人员

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

显示一个div并隐藏其他按钮点击angularjs

4 个答案: