Aurelia - Показать / Скрыть элемент на основе опции выбора

Question

Как скрыть класс div, если при выборе значения в опции select используется usd?

app.html

<select name="" id="" class="form-control" value.bind=""> 
      <option repeat.for="option of Options" model.bind="option.value">
           ${option.name} 
      </option>
</select>

<div class="row">
  <!-- enter code here -->
</div>

app.ts

export class Test {
    Option = [
      { value: 'usd', name: 'america'},
      { value: 'cad', name: 'canada money'}
    ];

}

Answer 1

Я согласен с Раджкумаром, вам стоит приложить еще больше усилий, чтобы решить это. У вас даже нет кода для базового выбора, код для которого есть во всем Интернете, например: https://ilikekillnerds.com/2015/10/working-with-forms-in-aurelia/

Тем не менее, я постараюсь помочь:

<template>
<form role="form">
    <select value.bind="selectedVal">
        <option repeat.for="option of someOptions"
             model.bind="option">${option.name}</option>
    </select>
</form>
</template>

<div class="row" show.bind="selectedVal === 'usd'">
  UsD SeLeCtEd
</div>

<div class="row" show.bind="selectedVal !== 'usd'">
  Other SeLeCtEd
</div>

Вышеприведенное должно отображать только контент "usd selected", когда вы выбираете USD, и "other selected", когда вы выбираете что-либо еще. Это не лучший способ сделать это, но должен работать.