javascript - 隐藏和显示内容 Angular

Question

我正在尝试为忘记登录数据的用户创建一个表单。有三个单选按钮，当用户单击单选按钮并单击“确定”时，整个内容将隐藏，并为他们选择的选项显示一个新表单。在 html 下方:

<div id="MainContent">
    <form ng-submit="">
        <label><input type="radio" name="dataForgotten" id="unForgotten"/>Forgot username</label>
        <label><input type="radio" name="dataForgotten" id="pwForgotten"/>Forgot password</label>
        <label><input type="radio" name="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>

        <input type="submit" value="OK">
        <input type="submit" value="Cancel">
    </form>
</div>

如何使用 Angular 实现这一目标？我对 Angular 的经验很少，所以非常感谢您的帮助。

提前致谢!

Answer 1

有两种方法可以达到预期的效果。

1. 使用 ng-if
2. 使用 ng-show 或 ng-hide

不同之处在于，ng-if 根据 Boolean 表达式删除/重新创建 DOM 树的一部分，即 true 或false 值。 另一方面，ng-show 只是根据表达式的值隐藏部分。它将 DOM 的该部分的显示设置为无。

对于您的情况，我更喜欢 ng-if 以便在正确的时间仅将 DOM 的必需部分加载到应用程序中。一些人认为，通过更改 web-inpsector 上的表达式，可以启用或禁用 ng-show block 。

这是已编辑代码。我已经包括了一个plunker。这是链接 http://plnkr.co/edit/JB4LAgo9rqtPnPZHpwWr?p=preview

  <label><input type="radio" value="unForgotten" ng-model="dataForgotten"/> Forgot username</label>
<br/>

<label><input type="radio" value="pwForgotten" ng-model="dataForgotten"/>Forgot password</label>
<br/>
<label><input type="radio" value="bothForgotten" ng-model="dataForgotten"/>Forgot both username and pw</label>


<div ng-if="dataForgotten == 'unForgotten'">
    <!-- If Username Forgotten then Content goes here-->
    Username Forgotten
</div>


<div ng-if="dataForgotten == 'pwForgotten'">
    <!-- If Password Forgotten then Content goes here-->
    Password Forgotten
</div>

<div ng-if="dataForgotten == 'bothForgotten'">
    <!-- If Both Forgotten then Content goes here-->
    Both Forgotten
</div>

这是关于 ng-if 的文档解释 https://docs.angularjs.org/api/ng/directive/ngIf

虽然这里是ng-show 的文档https://docs.angularjs.org/api/ng/directive/ngShow