Hide and show content Angular

Question

I am trying to create a form for users who have forgotten their login data. There are three radio buttons and when the user clicks on a radio button and clicks 'OK', the whole content hides and a new form is shown for the option they have chosen. Below the 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 can I make this happen with Angular? I have very little experience with Angular, so I'd really appreciate the help.

Thanks in advance!

you can use ng-show and ng-hide to achieve this.Try this docs.angularjs.org/api/ng/directive/ngShow — Divya MV
– Divya MV, Commented Jun 18, 2015 at 12:25
Yo can take a look on ng-if directive. docs.angularjs.org/api/ng/directive/ngIf — Fran Herrero
– Fran Herrero, Commented Jun 18, 2015 at 12:26

Evans Dianga · Accepted Answer · 2015-06-19 09:20:15Z

2

There are two ways to achieve the desired effect.

Using ng-if
Using ng-show or ng-hide

The difference is in this, ng-if removes/recreates a portion of the DOM tree based on a Boolean expression i.e. true or false values. On the other hand ng-show just hides the portion based on the value of the expression. It sets the display of that the part of the DOM to none.

For your case I would favor ng-if so that only the required part of the DOM is loaded into the app at the right time. Some have argued that by changing expressions on the web-inpsector, one could enable or disable an ng-show block.

Here is the Edited code. I have included a plunker. here is the link 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>

Here is the explanation on the docs as regards ng-if https://docs.angularjs.org/api/ng/directive/ngIf

While here is the documentation for ng-show https://docs.angularjs.org/api/ng/directive/ngShow

edited Jun 19, 2015 at 9:20

answered Jun 18, 2015 at 12:55

Evans Dianga

2102 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jme11 Over a year ago

Good answer, but don't forget ngSwitch for a third built in directive option.

Evans Dianga Over a year ago

@jme11 Yes, I will add an ng-switch explanation. Thanks for the insight

aw04 · Accepted Answer · 2015-06-18 12:55:09Z

You can use ng-show for this. The directive evaluates a boolean condition and shows the content when true, so to hide one section and show another you just need the inverse.

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

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

On your $scope, you'll have a bool completed property (or whatever you want to call it) and you can change this in your controller when the button is clicked using ng-click.

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

Controller:

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

*Note you could also shorten this part by performing the assignment directly in the ng-click directive.

Here's a working jsfiddle example.

ng-show docs

Also, if you'd like to make sure a radio button is checked before allowing the button to be clicked, have a look at ng-disabled which allows you to conditionally disable/enable your button.

Luca · Accepted Answer · 2015-06-18 12:27:02Z

0

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

answered Jun 18, 2015 at 12:27

Luca

1,8263 gold badges29 silver badges39 bronze badges

Comments

Sunil Prajapati · Accepted Answer · 2015-06-18 12:40:54Z

0

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

answered Jun 18, 2015 at 12:40

Sunil Prajapati

3083 silver badges10 bronze badges

Collectives™ on Stack Overflow

Hide and show content Angular

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related