显示一个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

使用此:小提琴

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