CODEWITHSUNDEEP
javascripthtmlangularjs
HenrikM
HenrikM

Reputation: 457

Display element based on data from an array in javascript

I'm trying to create a step by step form. I'm using AngularJS and UI-router to display the different forms, the value from these are stored in a javascript array. Since the element isn't active I'm trying to evaluate the data to show or hide a div.

The data is stored in:

$scope.formData = {};

Which is populated (among others) from this;

<input type="checkbox" id="outGoingEmail" onclick="showMe('outGoingEmail')" name="outGoingEmailChk" ng-model="formData.outEmail">

By dumping the data I can see that it evaluates to true;

<pre>
    {{ formData }}
</pre>

 {"outEmail":true}

I'm new to javascript but I've tried a lot of things but my div is always displayed:

<div id="incSMS">
    <input type="text" ng-model="formData.incSMSNumber">
</div>

The JS I've got so far;

$(document).ready(function() {
    if(outEmail == true) {
        document.getElementById("incSMS").style.display = 'block'; 
    }else {
        document.getElementById("incSMS").style.display = 'none'; 
    }
});

How do I evaluate outEmail properly?

Upvotes: 0

Views: 91

Answers (1)

Kudos
Kudos

Reputation: 1154

You can do couple of things with angular you can try ng-if or ng-show:

<div ng-if="!formData"></div>

It wil hide the div element if formData doesn't exist. Good luck!

Read more about it at https://docs.angularjs.org/api/ng/directive/ngIf

Upvotes: 2

Related Questions