使用 AngularJS 按钮显示/隐藏表单的简洁方式答案

【问题标题】：Clean way to show/hide forms with AngularJS Button使用 AngularJS 按钮显示/隐藏表单的简洁方式
【发布时间】：2014-10-04 09:24:02
【问题描述】：

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

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

PLUNKER DEMO（div 现在在页面login.html 上设置为hidden）

如果这很容易，如果另一个表单被选中，我将如何关闭另一个表单？例如，假设我单击了登录并出现了该表单，然后我决定实际注册（我希望登录向后滑动）。如何一次只打开一个表单？

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

【问题讨论】：

哈哈哈，那个笨蛋样品：D 天制作
只是为了澄清，以便我了解流程。您希望用户在进入您的应用程序时只看到某个页面上的登录按钮。当他们点击它时，他们必须看到一个登录表单。当他们点击登录时。他们必须登录。
@RohanBüchner 很高兴你喜欢它！我所做的你认为可以接受吗？使用ng-click wuth 显示/隐藏？ UPDATED DEMO
我想要的只是登录/注册出现，但是当他们点击一个时，会出现相应的表单。（两个按钮仍然存在）。并且一次只显示一个表格。喜欢我更新的演示
更新了链接，虽然朋克对我来说很慢：/

标签： javascript html forms angularjs

【解决方案1】：

将其修改为如下所示：

<form ng-submit="showLogin = showLogin ? login() : true">
  <fieldset>
    <div class="row" id="loginForm" ng-show="showLogin">

注意：showLogin 不需要用值初始化，因为它将是未定义的，并且在设置为 true 之前会被评估为假值。

【讨论】：

有趣！我也试着涉猎了一下。你认为做这样的事情可以接受吗？ UPDATED DEMO
你也可以使用 ng-if='booleanCheck'，如果为 false 则标记不会呈现，因此验证不会触发/表单不会提交
@RohanBüchner 关于如何使隐藏/显示更像幻灯片的任何想法..？

【解决方案2】：

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

隐藏或显示页面部分

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

制作动画。

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

控制器

$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 将自动处理幻灯片过渡。

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

【讨论】：