Generate a dynamic HTML id using Angular JS

Question

I currently have a fairly simple table that looks as follows:

<table id="responseGrid">
    <tbody>
        <tr id="response" data-ng-repeat="response in data.responses">
            <td id="Resp Key">{{response.key}}</td>
            <td id="Resp Value">{{response.value}}</td>
        </tr>
    </tbody>
</table>

However, if more than one row is created, then each table column would have the same ID. I want for each table column to have a unique ID based on the row. For instance, I want for the first row to have columns with the ids "Resp Key 1" and "Resp Value 1", then the next row would have columns with the ids "Resp Key 2" and "Resp Value 2", and so on.

Is there some way to do that in Angular JS? I tried looking for some sort of way of getting the index of the response that I am on, but that doesn't seem to work. Also, I can't figure out a way to concatenate an ID (although that may be more of an HTML issue). Any help is appreciated.

Curious as to why you need to specify ids for these items? Ideally any access you need to the response object would be via the child scope generated by ng-repeat. — mccainz
– mccainz, Commented Oct 15, 2014 at 18:39
@mccainz I was asked to have them be unique so that our testing framework (Twist) could reference the columns and confirm if the contents were correct. If I'm going in the wrong direction, feel free to point me in the right direction, but we'll keep this question as is since there could be a legitimate reason to use it. — Thunderforge
– Thunderforge, Commented Oct 15, 2014 at 18:42
understood - but in that case could the IDs simply be totally random or is the structure of the ID required by the testing framework? — mccainz
– mccainz, Commented Oct 15, 2014 at 18:47
The way we have it set up, the tests have hardcoded references to the IDs. For instance, the test might check whether the contents of table column with ID "Resp Key 1" is equal to "Foo" and "Resp Key 2" is equal to "Bar". We don't have it set up where we can dynamically query what the id of the column is, so random ones won't work. — Thunderforge
– Thunderforge, Commented Oct 15, 2014 at 18:49

Kalhan · Accepted Answer · 2014-10-15 18:44:22Z

3

you can do somthing like this $index is the index of the array

    <tr id="response" data-ng-repeat="response in data.responses">
        <td id="{{'Resp Key '+($index+1)}}">{{response.key}}</td> // this will result in `Resp Key 1`,`Resp Key 2` ..
        <td id="{{'Resp Value '($index+1)}}">{{response.value}}</td>
    </tr>

edited Oct 15, 2014 at 18:44

answered Oct 15, 2014 at 18:23

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

2 Comments

Thunderforge Over a year ago

This works, but it's zero-based indexing and I've been asked to make it one-based indexing. Is it possible to change? I tried to add one to the index, I wound up with "Resp Key 01", so it looks like I was doing string concatenation instead.

Kalhan Over a year ago

updated answer please check. you can use ($index+1) instead of $index

Collectives™ on Stack Overflow

Generate a dynamic HTML id using Angular JS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related