Aurelia / Typescript-如何通过选择标签将对象绑定到变​​量

Question

So, I have a static array of objects in JSON. I've populated a select tag with those options successfully and set the value of each option of the select tag to the object id.

tvs: any[] = [
        { "id": 1, "ip": "11.11.11.111", "port": "8080", "name": "tv 1" },
        { "id": 2, "ip": "11.11.11.111", "port": "8080", "name": "tv 2" },
        { "id": 3, "ip": "11.11.11.111", "port": "8080", "name": "tv 3" },
        { "id": 4, "ip": "11.11.11.111", "port": "8080", "name": "tv 4" },
        { "id": 5, "ip": "11.11.11.111", "port": "8080", "name": "tv 5" },
        { "id": 6, "ip": "11.11.11.111", "port": "8080", "name": "tv 6" }
    ];

and then in my html file:

<div class="col-md-6 col-lg-6">
     <label>Which tv do you want to alter?</label>
     <select class="form-control">
          <option repeat.for="tv of tvs" value="${tv.id}">${tv.name}</option>
     </select>
</div>

That works great, however I want to add a dynamic div below this one and have it change and show information based on the selected object. For example, if the user selects tv 5 in the select tag, I want it to show the information for tv 5. How do I bind the selected object to something so that I can accomplish this?

Answer 1

Aurelia provides model.bind for use on option elements inside a select . For your example something like this should work:

<div class="col-md-6 col-lg-6">
   <label>Which tv do you want to alter?</label>
   <select class="form-control" value.bind="selectedTV">
      <option repeat.for="tv of tvs" model.bind="tv">${tv.name}</option>
   </select>
</div>
<div if.bind="selectedTV">
  Info for TV ${selectedTV.name}:<br>
  ip: ${selectedTV.ip}<br>
  etc...
</div>