CODEWITHSUNDEEP
javascripthtmlangularjs
Eleina
Eleina

Reputation: 115

Hide and show content Angular

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!

Upvotes: 4

Views: 2282

Answers (4)

Evans Dianga
Evans Dianga

Reputation: 210

There are two ways to achieve the desired effect.

  1. Using ng-if
  2. 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

Upvotes: 2

aw04
aw04

Reputation: 11177

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.

Upvotes: 1

Sunil Prajapati
Sunil Prajapati

Reputation: 198

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

Upvotes: 0

Luca
Luca

Reputation: 1826

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

Upvotes: 0

Related Questions