Question

我必须用✓（登录部分）＆amp;在我的登录页面上显示另一个删除✓（注册部分）的div。我用的是ng-if＆amp;跑秀部分;但我不知道如何同时隐藏另一部分。

fread

Answer 1

您只需要撤消登录表单的条件：

<form method="post" action="#" role="login" ng-if="!myVar"> ..... </form>表示当值为true时显示元素。在您的情况下，您希望在（不是新用户）（ng-if）

时显示登录表单

Answer 2

只需将ng-if =“！myVar”添加到登录部分

即可

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<b>

    <body ng-app="" bgcolor="#f0f8ff">
    <div class="container">
        <div class="row" id="pwd-container">
            <div class="col-md-4"></div>

            <div class="col-md-4" ng-if="!myVar">
                <section class="login-form"></section>
                <form method="post" action="#" role="login">
                    <br>
                    <br>
                    <input type="email" name="email" placeholder="Email" required class="form-control input-lg" value="joestudent@gmail.com" />

                    <input type="password" class="form-control input-lg" id="password" placeholder="Password" required="" />


                    <div class="pwstrength_viewport_progress"></div>


                    <button type="submit" name="go" class="btn btn-lg btn-primary btn-block">Sign in</button>
                    <div>
                        <br>
                    </div>
            </div>

            New User? <input type="checkbox" ng-model="myVar" ng-init="myVar = false">
            <div ng-if="myVar">


                <form action="action_page.php" style="border:1px solid #ccc">
                    <div class="container">
                        <p>Please fill in this form to create an account.</p>
                        <hr>

                        <label><b>Email</b></label>
                        <input type="text" placeholder="Enter Email" name="email" required>

                        <label><b>Password</b></label>
                        <input type="password" placeholder="Enter Password" name="psw" required>

                        <label><b>Repeat Password</b></label>
                        <input type="password" placeholder="Repeat Password" name="psw-repeat" required>

                        <label>
                            <input type="checkbox" checked="checked" style="margin-bottom:15px"> Remember me
                        </label>

                        <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

                        <div class="clearfix">
                            <button   class="cancelbtn"  ng-click="myVar = !myVar" >Cancel</button>
                            <button type="submit" class="signupbtn">Sign Up</button>
                        </div>
                    </div>
                </form>
                <hr>
                <br>
            </div>

    </body>
</b>

</script>
</html>

显示一部分＆amp;隐藏另一部分

2 个答案: