Display element based on data from an array in javascript

Question

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?

I see that you use angularjs and pure js? Is this JS code in a angular controller? — Przemek
– Przemek, Commented Feb 10, 2016 at 15:32

Kudos · Accepted Answer · 2016-02-17 08:07:08Z

2

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

edited Feb 17, 2016 at 8:07

answered Feb 10, 2016 at 15:56

Kudos

1,18410 silver badges23 bronze badges

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

1 Comment

Kudos Over a year ago

Glad it helped :). If you are playing with angular try to avoid jquery and try to do it the angular way. It's much easier.

Collectives™ on Stack Overflow

Display element based on data from an array in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related