How to pass an Angularjs variable to an html input id?

Question

I'm adding checkboxes with angularjs ng-repeat like this:

<div class="checkbox-circle" ng-repeat="t in tenders">
  <input type="checkbox" checklist-model="contratacion.select" checklist-value="t.id" id="t.id">
  <label for="t.id">{{t.name}}</label>
</div>

Where "tenders" is an array with "name" and "id" properties. The problem is that the id value of the input is not changing through the loop, an the resultant checkboxes have the same id value. Am I passing incorrectly the id values to the input? Is it wrong to expect "t.id" to change in the input id?

Answer 1

use the same curly brace notation inside of the non-angular attributes that you would use for normal text, ie:

<div class="checkbox-circle" ng-repeat="t in tenders">
  <input type="checkbox" checklist-model="contratacion.select" checklist-value="t.id" id="{{t.id}}">
  <label for="{{t.id}}">{{t.name}}</label>
</div>

Answer 2

Yes, you would be wrong; that is because id is a standard attribute where t.id is simply a simply. For Angular to convert this value into the expected id, you need to use interpolation: id="{{t.id}}".

The method you were attempting to use is an Angular expression that is only valid for certain attributes, where the directive (checklist-value for example) allows for it; otherwise you need to use the {{<expression>}} way to evaluate your value.