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

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

使用ng-if
使用ng-show或ng-hide

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

对于您的情况，我倾向于ng-if，以便在适当的时间只将DOM的必需部分加载到应用程序中。有些人认为，通过更改web-inpsector上的表达式，可以启用或禁用ng-show块。

以下是已修改代码。我已经包括一个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

Answer 2

您可以使用ng-show。该指令评估一个布尔条件，并在为true时显示内容，因此要隐藏一个部分并显示另一个部分，您只需要反转。

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

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

在$scope上，您将拥有一个bool completed属性（或任何您想要调用的属性），并且可以在使用{{单击该按钮时在控制器中更改此属性1}}。

ng-click

控制器：

<button ng-click="changeCompleted()">Show/Hide</button>

*请注意，您也可以通过直接在$scope.changeCompleted = function(){ $scope.completed = !$scope.completed; }指令中执行赋值来缩短此部分。

这是一个有效的jsfiddle example。

ng-show docs

此外，如果您想在确定单击按钮之前确保选中单选按钮，请查看ng-disabled，以便您有条件地禁用/启用按钮。

Answer 3

如果你想用简单的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';
}

Answer 4

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

隐藏和显示内容Angular

4 个答案: