Question

这之间有什么组合： https://www.polymer-project.org/components/paper-elements/demo.html#paper-dropdown-menu 和angularjs。

我试过但仍无法让它发挥作用..

        <paper-dropdown-menu label="Categories">
            <paper-dropdown class="dropdown">
                <core-menu class="menu">
                    <template>
                        <paper-item ng-repeat="c in categories">{{c}}</paper-item>
                    </template>
                </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>

非常感谢任何建议！

Answer 1

我就是这样做的ng-polymer-elements。

我首先为core-menu创建了一个映射，这样您就可以在选择项目时使用范围内的ng-model和调用方法。

    coreMenu: {
       ngModel: {
           primitive: "selected"
       },
       ngTap: {
           event: "core-activate"
       }
    }

HTML

    <paper-dropdown-menu label="My Items">
        <paper-dropdown class="dropdown">
            <core-menu class="menu" ng-model="my.item">

                <paper-item ng-repeat="item in items" name="{{item.name}}">
                    {{item.name}}
                </paper-item>

            </core-menu>
        </paper-dropdown>
    </paper-dropdown-menu>

注意纸质项目中的name属性。这非常重要，因为核心菜单使用它来跟踪所选项目。您可以通过在核心菜单上设置valueattr="foo"来使用其他属性名称。

如果您需要更多详细信息或功能，可以将ng-tap="myFunction($event)"添加到core-menu元素以调用范围上的方法。然后，您可以从活动详细信息中获取有关所选项目的信息。

scope.myFunction = function($event) {
  var details = $event.detail.item.attributes.foo.value;
}

有人试图使用AngularJS和Polymer / paper-dropdown-menu吗？

1 个答案: