如何在纸张下拉菜单中检索当前输入

Question

我有以下纸质下拉菜单片段

.飞镖

.....

@property
List<String> suffixes = <String>[
  'I',
  'II',
  'III',
  'Junior',
  'Senior'
];

.html

<paper-dropdown-menu label = "Suffix">
  <paper-menu class = "dropdown-content">
    <template is = "dom-repeat"
              items = "[[suffixes]]"
              as = "suffix">
      <paper-item>[[suffix]]</paper-item>
    </template>
  </paper-menu>
</paper-dropdown-menu>

在下拉列表中进行选择的正确 .dart 代码是什么？

谢谢

Answer 1

有几种方法可以实现这一点。下面的示例显示了使用 selected-item 和 selected-item-label

的两种方法

.html

<!DOCTYPE html>
<dom-module id='app-element'>
  <template>
    <paper-dropdown-menu label = "Suffix"
                         selected-item="{{selectedItem}}">
      <paper-menu class = "dropdown-content">
        <template id="ddmtr" is="dom-repeat"
                  items="[[suffixes]]"
                  as="suffix">
          <paper-item label="suffix">[[suffix]]</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <div>selectedItem:<span>[[selectedItem]]</span> value: <span>[[selectedItemValue]]</span></div>

    <paper-dropdown-menu label = "Suffix"
                         selected-item-label="{{selectedItemLabel}}">
      <paper-menu class = "dropdown-content">
        <template is="dom-repeat"
                  items="[[suffixes]]"
                  as="suffix">
          <paper-item>[[suffix]]</paper-item>
          <!-- <paper-item label="suffix">[[suffix]]</paper-item> -->
          <!-- if the label attribute is not set, the text content is used -->
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <div>selectedItemLabel:<span>[[selectedItemLabel]]</span></div>
  </template>
</dom-module>

.dart

@HtmlImport('app_element.html')
library so33770938_paper_dropdown_menu_selected.web.app_element;

import 'dart:html' as dom;
import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/paper_dropdown_menu.dart';
import 'package:polymer_elements/paper_menu.dart';
import 'package:polymer_elements/paper_item.dart';

/// [PaperDropdownMenu], [PaperMenu], [PaperItem]
@PolymerRegister('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  @property var selectedItem;

  @property var selectedItemLabel;

  @Property(computed: 'getSelectedItemValue(selectedItem)')
  String selectedItemValue;

  @reflectable
  String getSelectedItemValue(dom.Element selectedItem) {
    DomRepeatModel model =
        ($['ddmtr'] as DomRepeat).modelForElement(selectedItem);
    return suffixes[model.index];
  }

  @property
  List<String> suffixes = <String>[
    'I',
    'II',
    'III',
    'Junior',
    'Senior'
  ];
}

如何在纸张下拉菜单中检索当前输入

How to retrieve the current input in a paper-dropdown-menu

dart

dart-polymer

polymer-elements

.飞镖

.html