JavaScript Function to AngularJS

Question

I have been getting interested in Angular recently and I was trying it out but having a little bit of a difficulty.

I have this JavaScript function:

function toggle(target) {
            var curVal = document.getElementById(target).style.visibility;
            document.getElementById(target).style.visibility = (curVal === 'visible') ? 'hidden' : 'visible';
        };

It changes the value between visible and hiddenon each click of the following button:

<button class="btn-info" onclick="toggle('theBox')" type="button">Toggle Box</button>

I am trying to do this same thing in Angular, just not sure how, as far as I understand Angular is the same as JavaScript in terms of the functions.. I just don't understand how to do this same operation using Angular.

Yan Ivan Evdokimov · Accepted Answer · 2016-08-27 21:54:23Z

1

With angular, you don't even need a javascript function for toggle:

Button:

<button ng-click="isShown = isShown ? false : true" type="button">Toggle Box</button>

"Box":

<div ng-show="isShown"></div>

Just read about "ng-click" and "ng-show" or "ng-if".

answered Aug 27, 2016 at 21:54

Yan Ivan Evdokimov

1791 gold badge4 silver badges15 bronze badges

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

1 Comment

arjwolf Over a year ago

I am trying this: I have my button like this: <button ng-click="isShown = isShown ? false : true" type="button">Toggle</button> And then I have my display like this:

<div id="container" class="container">	            			<embed src="www.google.com/pdf1.pdf" width="400" height="500" type='application/pdf' id="thePdf"> 			<embed ng-show="isShown" src="www.google.com/pdf1.pdf2" width="400" height="500" type='application/pdf' id="thePdf2">	     </div>

but it not working.

skylerto · Accepted Answer · 2016-08-27 21:54:39Z

0

Angular is just a JavaScript library. You can use the same JavaScript you are already using, as long as you include the JavaScript file which has the function on the page you're calling this function from.

Depending on which version of angularJS you're looking at using, you can leverage the library.

In angular 1.x you can use the ng-click directive http://www.w3schools.com/angular/ng_ng-click.asp

In angular 2 you can use click in the template, have a look at the list of events: http://learnangular2.com/events/

edited Aug 27, 2016 at 21:54

answered Aug 27, 2016 at 21:49

skylerto

719 bronze badges

3 Comments

Daniel Beck Over a year ago

"You can use the same JavaScript you are already using, as long as you include the JavaScript file which has the function on the page you're calling this function from." is really bad advice. I mean, yeah, you can do that, but it doesn't mean you should. Angular doesn't tend to mix well with non-angular javascript, especially any that wants to modify the DOM.

skylerto Over a year ago

I was addressing the posters realization that angular is JavaScript, "as far as I understand Angular is the same as JavaScript in terms of the functions". While gathering some resources to help using actual angular functionality.

Daniel Beck Over a year ago

OK, that is not at all clear in your answer -- it looks like you're suggesting just dropping his existing script into an Angular app, which would not work (because Angular wouldn't know about the styling set by this non-angular code, and would overwrite any changes it made on the next $digest.)

Collectives™ on Stack Overflow

JavaScript Function to AngularJS

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related