1

紙のドロップダウンメニューの次のスニペットがあります

ダーツ

....

@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 コードは何ですか?

ありがとう

4

1 に答える 1

0

これを実現するにはいくつかの方法があります。selected-item以下の例は、 とを使用する 2 つの方法を示しています。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>

ダーツ

@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'
  ];
}
于 2015-11-18T09:26:12.180 に答える