# Using $index in a custom attribute under repeat.for

**URL:** <https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075>\
**Category:** Help Requests\
**Created:** [November 20, 2019, 3:59pm UTC](https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075 "2019-11-20T15:59:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![xapn](https://avatars.discourse-cdn.com/v4/letter/x/91b2a8/32.png) [@xapn](https://discourse.aurelia.io/u/xapn)\
**Post date:** [November 20, 2019, 3:59pm UTC](https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075/1 "2019-11-20T15:59:08Z")

</div>

Hi,  
I try to have an unique identifier per checkbox for testing purposes.  
HTML template:

```
<ul>
    <li repeat.for="todo of todos>
        <input type="checkbox" checked.bind="todo.done" id="checkbox-$index">
    </li>
</ul>

```

View-model:

```
import {customAttribute} from 'aurelia-framework';
@customAttribute('id')
export class IdAttribute {}

```

But the string interpolation does not work. Could you tell me what is wrong with this sample?

---

<div class="post-metadata">

**Author:** ![m-gallesio](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m-gallesio/32/1288_2.png) [@m-gallesio](https://discourse.aurelia.io/u/m-gallesio)\
**Post date:** [November 20, 2019, 4:37pm UTC](https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075/2 "2019-11-20T16:37:24Z")

</div>

The sample code uses no string interpolation at all, it should be `id="checkbox-${$index}"` or `id.bind="'checkbox-'+$index"`

---

<div class="post-metadata">

**Author:** ![xapn](https://avatars.discourse-cdn.com/v4/letter/x/91b2a8/32.png) [@xapn](https://discourse.aurelia.io/u/xapn)\
**Post date:** [November 20, 2019, 7:30pm UTC](https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075/3 "2019-11-20T19:30:28Z")

</div>

I have already tried in such a way. But it does not work either.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 20, 2019, 9:08pm UTC](https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075/4 "2019-11-20T21:08:42Z")

</div>

If you log

```auto
@customAttribute('id')
export class IdAttribute {
  valueChanged(newValue) {
    console.log('value:' + newValue);
  }
}

```

You will find both of @m-gallesio’s suggestion works. What **does not work** is that they don’t create the real `id` attribute on the input element itself. That’s what you tried to see when inspecting the element.

The reason is you provided a custom attribute on a **standard** attribute called `id`, which took over the default Aurelia behaviour.

Solution: remove your custom attribute implementation, let Aurelia to do its work. You will see Aurelia will populate the real `id` attribute with both suggestions from @m-gallesio.

---

<div class="post-metadata">

**Author:** ![xapn](https://avatars.discourse-cdn.com/v4/letter/x/91b2a8/32.png) [@xapn](https://discourse.aurelia.io/u/xapn)\
**Post date:** [November 21, 2019, 12:12pm UTC](https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075/5 "2019-11-21T12:12:22Z")

</div>

I removed the id custom attribute ES class, and it works now. Thanks!

However it was just a first step. If I replace the id attribute in the HTML template with a test-id attribute without a matching view model class, I can notice:

- The test-id is rendered if its value is static (ex.: test-id=“foo”).
- The test-id is missing if its value needs a string interpolation (ex.: test-id=“foo-${$index}”).

```auto
<ul>
    <li repeat.for="todo of todos>
        <input type="checkbox" checked.bind="todo.done" test-id="checkbox-${$index}">
    </li>
</ul>

```

So I create a test-id custom attribute ES class.

```auto
import {customAttribute} from 'aurelia-framework';

@customAttribute('test-id')
export class TestIdAttribute {

    valueChanged(newValue) {
       console.log('value: ', newValue);
    }
}

```

Now I can observe the following Aurelia behavior: all test-ids are present, but the $index is not valued in HTML. Any idea to achieve that?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 21, 2019, 1:22pm UTC](https://discourse.aurelia.io/t/using-index-in-a-custom-attribute-under-repeat-for/3075/6 "2019-11-21T13:22:38Z")

</div>

If you provide a custom attribute implementation, aurelia assumes you will play the value in your code.

It does not rewrite html attribute back to the node for most use cases.

Aurelia does write back attribute to the node on some special attributes. For example, id. This is designed to play nice with other 3rd party js lib which wants the real attribute on the node.

The other special attributes you can use are `data-` and `aria-` attributes. If you bind to `data-id`, aurelia will populate the attribute for you. This is also designed to play nice to other js libs. For example, bootstrap uses data- attributes as parameters of many features.

Again, don’t provide a custom attribute implementation for `data-id`.