Question

我正在尝试使用可视或不可视的下拉元素，具体取决于单击哪个单选按钮。如果单击“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;
              }
    });

Answer 1

我认为在执行click处理程序时尚未设置checked，但是print语句应该显示是否是这种情况。

当您将所有代码打包到Polymer元素中时，您可以将无线电组值绑定到该元素的@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>

Google Dart下拉式可见性逻辑

1 个答案: