如何显示/隐藏按钮?

时间:2016-04-30 17:18:23

标签: javascript angularjs

我正在使用动态页面制作应用。我的页面上有多个按钮,但所有按钮不应该一次看到,而是连续可见。我需要它们一开始是不可见的。例如,第一个按钮应该是可见的。当我点击该按钮时,该按钮应该消失,并且应该出现新按钮等等。使用ng-show / ng-hide实现此目的的最佳选择是什么?

编辑--------

至于我试图用它们做什么,我试图做这样的事情,但后来我对这一切感到困惑。:

<button style="Width: 6em;"  ng-show="show" ng-click="question()">???</button>

<button style="Width: 6em;" ng-hide="hide" ng-click="question1()">???</button>  

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    var darkness = "Darkness";
    $scope.darkness = darkness;


    $scope.question = function () {

        var text = "Nothing but darkness and the pain that radiates through your very being.";
        $scope.text = text;
        $scope.hide = false;
        $scope.show = !show;
    }
});

1 个答案:

答案 0 :(得分:0)

我一直致力于显示和隐藏div元素的应用程序。希望你能继续下面的例子。

    <div class="container" ng-app="showHideApp" ng-controller="showHideController">
       <div class="col-sm-8 col-sm-offset-2">
           <!-- FORM -->
           <div class="form-group">
              <button class="btn btn-danger" ng-click="showMe();">Click me for show</button>
              <button class="btn btn-danger" ng-click="hideMe();">Click me for hide</button>
           </div>
       <div class="form-group" ng-show="show">
         <p>I am showing</p>
       </div>
    </div>
</div>

JS代码:

angular.module('showHideApp',[]).controller('showHideController', function($scope){
       $scope.showMe = function(){
         $scope.show=true;
       }
       $scope.hideMe = function(){
         $scope.show=false;
       }
   });