Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Seth Warner
Seth Warner
1,878 Points

How would I change this javascript into AngularJS?

So I believe I may not be using the directives correctly, that I may be making this harder than it is. My goal is to be able to click on one of the <a href ="#"></a> buttons, I have in my html, hide the content of the other elements associated with their buttons and show the content associated with the button clicked this way.

  • Seth
    var coverLetter;
    var bio;
    var gallery;


  document.getElementById('coverLetter').onclick = function(coverLetter, bio, gallery) {
      bio = false;
      gallery = false;
      coverLetter = true;

    }

  document.getElementById('bio').onclick = function(coverLetter, bio, gallery) {
      coverLetter = false;
      gallery = false;
      bio = true;

    }

  document.getElementById('gallery').onclick = function(coverLetter, bio, gallery) {
      bio = false;
      coverLetter = false;
      gallery = true;

    }  

    $scope.checkValue = function checkValue(coverLetter, bio, gallery) {
      if (coverLetter === true) {
      return coverLetter;

    } else if (bio === true) {
      return bio;

    } else if (gallery === true ){
      return gallery;

    }

2 Answers

Seth Kroger
Seth Kroger
56,416 Points

Doing this in Angular, you'd do it mostly with directives. ng-click directives on the anchors and ng-show/ng-hide on the content.

Seth Warner
Seth Warner
1,878 Points

Seth Kroger So technically then all's I have to do is this?

<a href ="#" ng-click="coverLetter = !coverLetter"> Cover Letter </a>
<p ng-bind-html="myHTML" show="coverLetter"></p>
Seth Kroger
Seth Kroger
56,416 Points

You'd have to add some logic to hide the others while showing only one, but that's pretty close to all that need to be done.

Seth Warner
Seth Warner
1,878 Points
Seth Warner
Seth Warner
1,878 Points

Thanks Seth Kroger ! You have NO idea how happy I am right now!