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

Question

我的 html 文件中有两个 <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 值的按钮 onclick

Answer 3

你的代码看起来没有问题，那么你的问题是什么？绑定到 ng-show 的 showme 表示 $scope.showme，如果要显示按钮 init.you，则需要在控制器中注入 $scope 应该定义$scope.showme = true

Answer 4

在您的控制器或指令中将 showme 设置为范围变量，以用作

$scope.showme = 真；

然后在视图中使用这个作用域变量来更新 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>

希望对您有所帮助

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

Show another Div when I clicked the button on the Previous Div

html

angularjs

ng-hide

angularjs-ng-show