Aurelia select initial value [duplicate]

Question

I have the following code:

javascript:

export class App {
  values = [
    {id: 0, text:'Text 1'},
    {id: 1, text:'Text 2'},
    {id: 2, text:'Text 3'}
  ];

  obj = {
    selected: 2
  };
}

html:

<template>
  <select value.bind="obj.selected">
    <option repeat.for="option of values" value="${option.id}">${option.text}</option>
  </select>
</template>

The problem is that the initial value of the select is not the thirth option as expected.

What I have to do to make it works correctly?

Plunk example

Answer 1

The id property is of type number so you'll want to make sure each option element's "value" is also of type number. This means you do not want to use a string interpolation binding (eg ${...}) because these always convert the source value to a string. You also won't want to use the option element's value attribute to store the value because this attribute only accepts strings. Instead use the model property which is a special property aurelia's binding system understands and can store any type. These kinds of scenarios are discussed in the docs here.

tldr: change your option element binding to this:

<option repeat.for="option of values" model.bind="option.id">${option.text}</option>