Accessing dynamic element id's in AngularJS

Question

I am working with an app that has an ng-repeat that populates a navigation sidebar with a list of items from a Mongo DB. The ng-repeat also populates a series of option buttons for each item. A couple of these option buttons share a dynamic id for each iteration in the ng-repeat. What should be happening here is when I click on one of these buttons, it would change the button 'text' and display some additional options under the menu item and toggle back when clicked again.

Here is my code for these buttons:

<span>
    <button ng-hide="highlightItem()" ng-click="showTopic()" ng-attr-id="{{ 'category' + subject._id }}" class="add-button"><i class="fa fa-chevron-down"></i></button>
    <button ng-click="hideTopic()" ng-show="highlightItem()" ng-attr-id="{{ 'category' + subject._id }}" class="add-button"><i class="fa fa-chevron-up"></i></button>           
</span>

The issue that I am having is that I cannot seem to figure out how to access that dynamic id in my controller. I have code in place that will change the button between the ng-show and ng-hide, but it does it for all iterations of ng-repeat.

This is currently how I am attempting to access the dynamic id. I am not getting any errors, but when I try to use this in my function it doesn't work.

$scope.subjectList = subjects.get({});
var topicButton = document.getElementById('topic' + $scope.subjectList._id);

I have also tried

var topicButton = document.getElementById('topic' + $scope.subject._id);

What is the best way to access the dynamic id in Angular/Javascript? I do not want to use jQuery with this if at all possible.

You're going about this in a very non-Angular sort of way. Rather than searching for the element, I would just pass in the object or the id into your showTopic() or highlightItem() methods, and act using that id. However, I was able to get the element by getElementById - in your html, you're setting 'category' as the prefix and your call, you're setting 'topic' as your prefix, which obviously won't work. — EmptyArsenal
– EmptyArsenal, Commented Dec 15, 2014 at 21:37

Mike Quinlan · Accepted Answer · 2014-12-15 21:45:32Z

0

First and foremost, never manipulate the DOM within an angular controller! It is bad practice. Also, it is bad practice to evaluate methods in ngShow/ngHide.

If I understand you correctly, you're trying to get the subject_id for some reason when the button is clicked. Why can't you just pass back either the id or the entire subject to your method? Then your html would look something like this:

<span>
  <button ngClick="toggleTopic(subject)" class="add-button">
    <i class="fa" ng-class="{'fa-caret-down': subject.hidden, 'fa-caret-up': !subject.hidden}"></i>
  </button>
</span>

Then in your controller you could write something like this:

$scope.toggleTopic = function(subject) {
  subject.hidden = !subject.hidden;
};

Using the hidden attribute of your subjects, you can now show or hide elements of your dropdown with ngShow/ngHide like so:

<p ng-bind="subject.descripton" ng-hide="subject.hidden"></p>

This way, you don't have to search the DOM for elements at all.

answered Dec 15, 2014 at 21:45

Mike Quinlan

2,88219 silver badges26 bronze badges

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

3 Comments

gjanden Over a year ago

This looks like what I need. I'll play with it and see if I can get it to work.

gjanden Over a year ago

After evaluating my code a bit more, looks like I don't actually need to to get the subject_id and so was able to achieve this with ng-click="toggle = !toggle" ngclass="{'fa-caret-down': !toggle, 'fa-caret-up': toggle}. Thanks for your input Mike!

Mike Quinlan Over a year ago

Even simpler! Although I would personally consider assignment logic in your DOM to be bad practice, there is definitely something to be said about the tradeoff between assigning a view related variable in your DOM as opposed to fattening your controller logic. This seems like a good use case for a list-related collapse directive.

Collectives™ on Stack Overflow

Accessing dynamic element id's in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related