Question

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

有一种简单的方法可以使用ng-hide或ng-class之类的东西来做这件事，如果可能，我想用AngularJS做这件事吗？

PLUNKER DEMO （表单div目前在hidden页面设置为login.html）

如果这很容易，如果选择另一个表格，我怎么能让一个表格关闭？就像在，让我说我点击登录并且那个表格出现了，然后我决定实际注册（我希望登录向后滑动）。我怎样才能一次只打开一张表格？

*如果你知道任何很酷的输入示例东西/引用可以用AngularJS完成，那也很棒，我喜欢这种混淆的语言哈哈

Answer 1

修改它看起来像这样：

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

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

Answer 2

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

隐藏或显示页面部分

ng-show / ng-hide - ＆gt;标记隐藏
ng-if - ＆gt;标记被删除

为此动画。

Angular有一些内置功能。当你使用ng-class，if，show，hide时。 Angular wil添加过渡性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＆amp;的值。我的控制器内的rightColumn和angular将自动处理幻灯片过渡。

更多信息：

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

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

使用AngularJS Button显示/隐藏表单的干净方式

2 个答案: