CODEWITHSUNDEEP
polymerpolymer-1.0
devAds
devAds

Reputation: 97

Dynamic Menus Paper Item

I am currently using paper dropdown menu, paper listbox and paper item web components to try and create a list. The code is the following:

<paper-dropdown-menu label="Assigned" vertical-align>
 <paper-listbox attr-for-selected="id" class="dropdown-content" fallback-selection="default" selected="{{assignedFilter}}">
  <paper-item id="default">Select Configs</paper-item>
  <paper-item id="displayAssignedConfigs">TRUE</paper-item>
  <paper-item id="displayAllConfigs">ALL</paper-item>
 </paper-listbox>
</paper-dropdown-menu>

In this example, there are 3 paper items that have static text. I would like the number of items in the list and the text in these items to be generated dynamically based on the response from an Ajax request I am making.

Any ideas or devs that have done this kind of thing before would be a great help. I am programming using Polymer 1.0.

Upvotes: 0

Views: 246

Answers (1)

Lukasz Matysiak
Lukasz Matysiak

Reputation: 921

Use dom-repeat helper element:

<paper-dropdown-menu label="Assigned" vertical-align>
  <paper-listbox attr-for-selected="id" class="dropdown-content" fallback-selection="default" selected="{{assignedFilter}}">
    <template is="dom-repeat" items="{{ajaxResponse}}">        
      <paper-item id="{{item.id}}">{{item.label}}</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>

The above assuming that your ajax returns a response in the form of:

[
  {id: "default", label: "Select Configs"},
  {id: "displayAssignedConfigs", label: "TRUE"},
  {id: "displayAllConfigs", label: "ALL"},
  ...
]

Upvotes: 0

Related Questions