How to change polymer 1.0 paper-button color dynamically from an array of colors?

Question

I have an array buttonColors, which has set of colors in the hex format. Now I want to display set of paper-button each with the color present in the buttonColors Array. How to achieve it in polymer 1.0?

<template is="dom-repeat" items="{{buttonColors}}">
      <paper-button style="background-color:{{item}}" >
                  <b>click me</b>
      </paper-button>
</template>

The above snippet does not seem to work. Kindly help.

Answer 1

You need to create a function and call it in following way

<template is="dom-repeat" items="{{buttonColors}}">
      <paper-button style="{{computeStyle(item)}}" >
                  <b>click me</b>
      </paper-button>
</template>

<script>
computedStyle:function(cl)
{
 var s= "background-color:"+cl;
  return s;
}
</script>