javascript - Google Dart 下拉可见性逻辑

Question

我试图根据单击的单选按钮使下拉元素可见或不可见。如果单击“临时”单选按钮，则应隐藏下拉元素。如果单击“预定义”单选按钮，则不应隐藏下拉元素。问题是控件似乎需要单击两次才能执行上述预期操作，而应该只需要单击一次。任何建议将不胜感激。如果您需要更多信息，请告诉我。

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>

Dart :

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

我想在执行点击处理程序时尚未设置检查，但您的打印语句应该显示是否是这种情况。

当您将所有代码打包到一个 Polymer 元素中时，您可以将单选组值绑定(bind)到 @observable String radioValue;该元素并将下拉列表包装在 <template if=...> 中聚合物会为您隐藏所有的表演。

<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>