Adding an id to HTML when looping through Angular objects

Question

I have some HTML:

<div class='list-group' >
    <a href="javascript:;" ng-attr-id="{{company.policy_number}}" class='list-group-item' ng-repeat="company in companies">{{company.primary_name}}</a>
</div>

Each object looks like:

{
    policy_number: 12345,
    primary_name: "Policy Name Here"
}

How can I set the id of the link that I create to the policy number of the object?

I have tried both id="{{company.policy_number}} and ng-attr-id={{company.policy_number}}, is there something that I am missing here where I can not access this?

Thanks!

id={{company.policy_number}} should work, are you getting an error or is the id field empty? — caffeinated.tech
– caffeinated.tech, Commented Nov 10, 2014 at 16:03
No, it just makes it id={company.policy_number}. If I make it id={company.policy_number},though, it is blank. — Brandon Shega
– Brandon Shega, Commented Nov 10, 2014 at 16:05

enguerranws · Accepted Answer · 2014-11-10 16:26:37Z

2

You should use id="{{company.policy_number}}".

It is working in this plunker

edited Nov 10, 2014 at 16:26

enguerranws

8,2338 gold badges53 silver badges101 bronze badges

answered Nov 10, 2014 at 16:09

Mukund Kumar

23.5k20 gold badges64 silver badges85 bronze badges

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

5 Comments

Brandon Shega Over a year ago

Hmm, ya that's weird... Even if I use id="{{company.primary_name}}" it still just shows id="{company.primary_name}". But I know primary_name is working.

Mukund Kumar Over a year ago

which angular version you are using.

Mukund Kumar Over a year ago

in my case this version work perfect.if is it possible to you then please create plunker or post more detailed code.

Brandon Shega Over a year ago

Do you think it has anything to do with me using XSLT? This is actually part of a .xsl file, I wonder if the transformation is replacing one of the sets of curly braces.

Brandon Shega Over a year ago

That was it, here is a link to a fix: stackoverflow.com/questions/23030507/…

galets · Accepted Answer · 2014-11-10 16:39:32Z

0

I don't like it myself, when someone instead of answering the question replies with "why do you even doing that, you should be doing it another way", but nevertheless here I go.

If you are looking to give ID to controls within ng-repeat loop, you are likely doing something wrong. You only need ID if you are accessing DOM, but the whole point of angular is that you should not be accessing DOM. Once you see jquery in your controller, it's time to stop and reevaluate why are you doing it and there's pretty much a guaranteed better way to handle what you want.

For example: if you are looking to provide a click handler it is much better to have something like a ng-click="policy_clicked(company.policy_number)" inside your HTML within a loop

Again, I apologize for giving you a non-answer, but I've seen folks doing this mistake over and over again, and it leads to hugely unsustainable code

answered Nov 10, 2014 at 16:39

galets

18.7k19 gold badges76 silver badges103 bronze badges

1 Comment

Brandon Shega Over a year ago

I understand that, this application was already written, I am just adding some functionality to it using angular. Trust me, if I could rewrite this entire thing I would. Thanks for the advice though :)

Collectives™ on Stack Overflow

Adding an id to HTML when looping through Angular objects

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related