Anybody try to use AngularJS and Polymer/paper-dropdown-menu?

Question

Is there any combination between this: https://www.polymer-project.org/components/paper-elements/demo.html#paper-dropdown-menu and angularjs.

I tried but still cannot get it to work..

        <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>

Any advice would be greatly appreciated !

Answer 1

This is how I did it using ng-polymer-elements.

I first created a mapping for the core-menu, which will allow you to use ng-model and call methods on your scope when you select an item.

    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>

Notice the name attribute in the paper-item. This is very important because it is used by the core-menu to track the selected item. You can use a different attribute name by setting valueattr="foo" on the core-menu.

If you need more details or functionality, you can add ng-tap="myFunction($event)" to the core-menu element to call a method on your scope. You can then get information about the item selected from the event details.

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