Question

我的html文件中有两个<div>。第一个<div>包含一个按钮，当我单击时应显示另一个div并隐藏第一个div。我的代码是这样的：

<div class="container" ng-hide="showme">
    <p>Quick</p>
    <button class="button" ng-click="showme=true" >Edit</button>
</div>
<div class="container" ng-show="showme">
    <p>Congratulations!</p>
</div>

我怎么可能这样做？

Answer 1

使用jquery更容易写一下

    $(document).ready(function(){
        $("#Button-id").click(function(){
            $(this).parent().css("display","none");
            $(this).parent().next().css("display","block");
        });
    });

https://jsfiddle.net/sy1x1xm9/

Answer 2

只需在javascript中创建一个变量即可。

var showme = false;

然后添加一个按钮，点击更新showme值

Answer 3

您的代码似乎没有错，那么您的问题是什么？绑定到showme的{{1}}表示ng-show，如果要显示按钮init，则需要在控制器中注入$scope.showme。您应该定义$scope 1}}

Answer 4

将showme设置为控制器或指令中的范围变量，无论哪个用作

$ scope.showme = true;

然后在视图中使用此范围变量来更新dom：

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <div class="container" ng-hide="showme">
            <p>Quick</p>
            <button class="button" ng-click="showme=true">Edit</button>
        </div>
        <div class="container" ng-show="showme">
            <p>Congratulations!</p>
        </div>
    </div>

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

          $scope.show = true;
    });
    </script>

希望这有帮助

当我点击Previous Div上的按钮时显示另一个Div

4 个答案: