Javascript 隐藏和显示内容

我试图为忘记登录数据的用户创建一个表单。有三个单选按钮，当用户单击单选按钮并单击“确定”时，整个内容将隐藏，并为他们选择的选项显示一个新表单。在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几乎没有经验，因此我非常感谢您的帮助

---

提前谢谢

如果您希望使用纯javascript：

<a href="#" onclick="hide('MainContent')">Close</a>

function show(target) {
    document.getElementById(target).style.display = 'block';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
}

功能表演（目标）{
document.getElementById（target.style.display='block'；
}
函数隐藏（目标）{
document.getElementById（target.style.display='none'；
}

您可以使用

ng show

进行此操作。该指令计算布尔条件并在为true时显示内容，因此要隐藏一个部分并显示另一个部分，只需使用相反的值即可

<div ng-show="!completed">
    First Section
</div>

<div ng-show="completed">
    Second Section
</div>

控制器：

$scope.changeCompleted = function(){
    $scope.completed = !$scope.completed;
}

*注意：您也可以通过直接在

ng click

指令中执行赋值来缩短此部分

这是一张工作票

---

此外，如果您想确保在允许单击按钮之前选中单选按钮，请查看允许您有条件地禁用/启用按钮的选项。

有两种方法可以实现所需的效果

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

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

<form name="secondForm" ng-show="submited">
</form>

</div>

如果

使用

ng show

或

ng hide

区别在于，

ng如果

基于一个

Boolean

表达式（即

true

或

false

值）删除/重新创建DOM树的一部分。 另一方面，

ng show

只是基于表达式的值隐藏部分。它将DOM部分的显示设置为“无”

对于您的情况，如果，我倾向于使用

ng，以便在正确的时间将DOM的必需部分加载到应用程序中。一些人认为，通过更改web上的表达式，可以启用或禁用
ng show
块

这是经过编辑的代码。我已经包括了一个plunker。这里是链接

忘记用户名


忘记密码


忘记用户名和密码
忘记用户名
忘记密码
都忘了

以下是关于
ng if

这是关于
ng show
的文档，您可以使用
ng show
和
ng hide
来实现这一点。尝试使用ng模型的ng show和ng hide。您可以查看
ng if
指令。回答得很好，但不要忘记第三个内置指令选项的ngSwitch。@jme11是的，我将添加一个ng开关解释。谢谢你的洞察力
<div id="MainContent">
<form ng-submit="formsubmit(dataForgotten)">
    <label><input type="radio" ng-model="dataForgotten" id="unForgotten"/>Forgot username</label>
    <label><input type="radio" ng-model="dataForgotten" id="pwForgotten"/>Forgot password</label>
    <label><input type="radio" ng-model="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>

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

<form name="secondForm" ng-show="submited">
</form>

</div>

 $scope.submited=false;
 $scope.formsubmit = {
//form value insert code here
 $scope.submited=true;
};

  <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>