Hide and show Angular content

Question

I am trying to create a form for users who have forgotten their login details. There are three radio buttons, and when the user clicks on the radio button and clicks “OK”, all the content is hidden and a new form is displayed for the option he chooses. Below 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>

How to do this with Angular? I have very little experience with Angular, so I am very grateful for the help.

Thanks in advance!

Answer 1

There are two ways to achieve the desired effect.

• Using ng-if
• Use ng-showorng-hide

, ng-if / DOM Boolean, true false. , ng-show , . , DOM .

ng-if, DOM. , , web-inpsector, ng-show.

Edited. . 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 . , , , , .

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

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

$scope bool completed ( , ), , ng-click.

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

:

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

* , , ng-click.

jsfiddle.

ng-show docs

, , , , ng-disabled, / .

Answer 3

If you want to have it in plain 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>

// controller code

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