Google Dart 下拉可见性逻辑答案

【问题标题】：Google Dart Drop-down Visibility LogicGoogle Dart 下拉可见性逻辑
【发布时间】：2014-08-01 16:32:19
【问题描述】：

我正在尝试使下拉元素可视化或不可视化，具体取决于单击了哪个单选按钮。如果单击“ad-hoc”单选按钮，则应隐藏下拉元素。如果单击“预定义”单选按钮，则不应隐藏下拉元素。问题是该控件似乎需要两次单击才能执行上述预期操作，并且应该只需要单击一次。任何建议将不胜感激。如果您需要更多信息，请告诉我。

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>

飞镖：

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;
              }
    });

【问题讨论】：

你接受了我的回答——这是否意味着你已经开始工作了？我期待一些额外的问题;-)
是的，我实际上是用一种更简单的方法来做的，但这很有效，谢谢。

标签： javascript html css dart dart-polymer

【解决方案1】：

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

当您将所有代码打包到 Polymer 元素中时，您可以将单选组值绑定到该元素的 @observable String radioValue; 并将下拉列表包装在 <template if=...> 中，然后 Polymer 会为您隐藏所有显示。

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

【讨论】：