Lógica de visibilidad del menú desplegable de Google Dart

Question

Estoy intentando tener un elemento desplegable visual o no dependiendo del botón de opción en el que se haga clic.Si se hace clic en el botón de opción "ad-hoc", el elemento desplegable debe estar oculto.Si se hace clic en el botón de opción "predefinido", el elemento desplegable no debe ocultarse.El problema es que el control parece requerir dos clics para realizar la acción esperada arriba y solo debería requerir un clic.Cualquier recomendación será apreciada.Por favor, hágamelo saber si necesita más información.

HTML:

        <paper-radio-group selected="small">
          <paper-radio-button name="predefined" id="predefined" label="Predefined"></paper-radio-button>
          <paper-radio-button name="adhoc" id="adhoc" label="Ad-hoc"></paper-radio-button>
          </paper-radio-group>
          <div class="row yellowBorder form">
            <div class="large-12 columns">
              <select id="asset" class="titilium" selectedIndex="{{currentIndex}}" value="{{dropDownValue}}" on-change="{{changedHandler}}" required>
                <option value="Placeholder A">Placeholder A</option>
                <option value="Placeholder B">Placeholder B</option>
                <option value="Placeholder C">Placeholder C</option>
                <option value="Placeholder D">Placeholder D</option>
                <option value="Placeholder E">Placeholder E</option>
                <option value="Placeholder F">Placeholder F</option>
                <option value="Placeholder G">Placeholder G</option>
                <option value="Placeholder H">Placeholder H</option>
                <option value="Placeholder I">Placeholder I</option>
            </select>
            </div>

Dardo:

InputElement predefinedCheckBox = shroot.querySelector("#predefined");
    InputElement adhoc = shroot.querySelector("#adhoc");
    var dropDownValue = shroot.querySelector("#asset");

    predefinedCheckBox.checked = true;

    predefinedCheckBox.onClick.listen((e){

        if (predefinedCheckBox.checked == true) {
          print("predefined checked");
          dropDownValue.hidden = false;
        } else {
          print("predefined not checked");
          dropDownValue.hidden = true;
        }

      });

    adhoc.onClick.listen((e){
      if (adhoc.checked == true) {
                print("adhoc checked");
                dropDownValue.hidden = true;
              } else {
                print("adhoc not checked");
                dropDownValue.hidden = false;
              }
    });

Answer 1

Supongo que la opción marcada aún no está configurada cuando se ejecuta el controlador de clic, pero sus declaraciones de impresión deberían mostrar si este es el caso.

Cuando empaqueta todo su código en un elemento Polymer, puede vincular el valor del grupo de radio a un @observable String radioValue; de ese elemento y envuelva el menú desplegable en un <template if=...> y el polímero oculta todo el espectáculo por ti.

<template if="{{radioValue == 'predifined'}}">
  <div class="row yellowBorder form">
    <div class="large-12 columns">
      <select id="asset" class="titilium" selectedIndex="{{currentIndex}}" value="{{dropDownValue}}" on-change="{{changedHandler}}" required>
        <option value="Placeholder A">Placeholder A</option>
        <option value="Placeholder B">Placeholder B</option>
        <option value="Placeholder C">Placeholder C</option>
        <option value="Placeholder D">Placeholder D</option>
        <option value="Placeholder E">Placeholder E</option>
        <option value="Placeholder F">Placeholder F</option>
        <option value="Placeholder G">Placeholder G</option>
        <option value="Placeholder H">Placeholder H</option>
        <option value="Placeholder I">Placeholder I</option>
      </select>
    </div>      
  </div>
</template>