javascript - 使用 AngularJS 按钮显示/隐藏表单的简洁方法

Question

我不确定这有多容易，但我想做的是只向用户显示一个登录/注册按钮。单击按钮后，我希望它忽略我的 js 中的实际验证内容，而是滑出其下方的相应表单，然后再次单击实际提交本身。 (一次点击显示，另一次点击提交)。

有没有一种简单的方法可以用 ng-hide 或 ng-class 之类的东西来做到这一点，如果可能的话，我想用 AngularJS 的东西来做到这一点？

PLUNKER DEMO (表单 div 现在在页面 login.html 上设置为 hidden)

如果这很容易，如果选择了另一种形式，我将如何关闭另一种形式？例如，假设我单击了“登录”并出现了该表单，然后我决定实际注册(我希望“登录”向上滑动)。我怎样才能一次只打开一个表单？

*如果您知道可以使用 AngularJS 完成的任何很酷的输入示例内容/引用，那也很棒，我喜欢这种语言，它只是令人困惑哈哈

Answer 1

就像我在之前的评论中所说的那样。您可以使用

隐藏或显示页面部分

• ng-show/ng-hide -> 标记被隐藏
• ng-if -> 标记被删除

为此设置动画。

Angular 有一些内置功能。当你使用 ng-class 时，如果，显示，隐藏。 Angular 将添加过渡性 css 标签

Controller

$scope.leftColumn = 'col-lg-12';   // will be changed to col-lg-3
$scope.rightColumn = 'hidden';     // will be changed to col-lg-9

标记

 <div ng-class="leftColumn">
    this is 100% 
  </div>

 <div ng-class="rightColumn" >
    this is hidden @ first
 </div>

CSS

.col-lg-3-add {
    -webkit-transition: 0.8s ease-out all;
    transition: 0.8s ease-out all;
}

.col-lg-3-remove {
    -webkit-transition: 0.5s ease-out all;
    transition: 0.5s ease-out all;
}

.col-lg-9-add-active {
    display: none;
}

.col-lg-9-add {
    -webkit-transition: 0.1s linear all;
    transition: 0.1s linear all;
}

请注意，我使用的是一些 Bootstrap 类的摘录。 col-12 是 100%，col-3 是 25%...我认为。

在我的示例中，我所做的只是更改 Controller 内 leftColumn 和 rightColumn 的值，an​​gular 将自动处理幻灯片过渡。

更多信息:

https://docs.angularjs.org/guide/animations

http://www.divshot.com/blog/tips-and-tricks/angular-1-2-and-animate-css/