使用AngularJS Button显示/隐藏表单的干净方法 [英] Clean way to show/hide forms with AngularJS Button

问题描述

我不确定该操作的简便性，但是我要尝试的是仅向用户显示一个登录/注册"按钮.单击按钮后，我希望它忽略我的js中的实际验证内容，而是滑出其下方的相应表单，然后再次单击以实际提交自身.(一次点击显示，另一次点击提交).

I am not sure how easy this can be done, but what I am trying to do is have only a Login/Register button appear to a user. Once a button is clicked, I want it to ignore the actual validation stuff in my js but rather slide out the respective form beneath it, then once again clicked actually submit itself. (one click to show, another click to submit).

是否有一种简单的方法来处理诸如 ng-hide 或 ng-class 之类的东西，如果可能的话，我想使用AngularJS来做到这一点?

Is there a simple way to do this with stuff like ng-hide or ng-class, I want to do it with AngularJS stuff if possible?

PLUNKER DEMO (表格 div 现在在页面 login.html )

如果这很容易，如果选择了另一个窗体，我该如何关闭另一个窗体?例如，假设我单击了Login(登录)，然后出现了该表格，然后我决定进行实际注册(我希望Login可以向上滑动).我如何一次只能打开一个表单?

If this is easy, how would I also make one form close if the other was selected? As in, lets say I clicked Login and that form appeared, then I decided to actually Register (I want Login to slide back up). How can I keep only one form open at a time?

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

*If you know of any cool input example stuff/references that can be done with AngularJS that would be awesome too, I love the language it is just confusing haha

推荐答案

就像我之前的评论中所述.您可以使用

Like I've stated in my previous comment. You can hide or show page sections using

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

对此进行动画处理.

Angular具有一些内置功能.当您使用ng-class时，如果显示，隐藏.角度将添加过渡性CSS标签

Angular has a few built in features. when you use ng-class, if, show, hide. Angular wil add transitional css tags

控制器

$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;
}

注意，我使用的是某些引导程序类的节选.col-12是100％，col-3是25％...我认为.

在我的示例中，我要做的就是更改leftColumn&的值.控制器内部的rightColumn，Angular会自动处理幻灯片过渡.

In my example all I'm doing is changing the value of leftColumn & rightColumn inside my controller, and angular will automagically handle the slide transition.

更多信息:

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

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

这篇关于使用AngularJS Button显示/隐藏表单的干净方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！