.dart

...

@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-label和<!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>   </template> </paper-menu> </paper-dropdown-menu> <div>selectedItemLabel:<span>[[selectedItemLabel]]</span></div> </template> </dom-module>

的两种方式

<强> html的

@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'
  ];
}

<强> .dart

{{1}}

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

.dart

html的

1 个答案: