Rendering of polymer element created using template repeat

[naresh aradhyula]

In the below code we are able to create 7 div tags dynamicaly, if we want to change the style of any  div dynamicaly

  how to do it?

<template repeat="{{ item in items }}">     
<div id="in">q{{item}}<t>{{user.question[item].time}}<t>{{user.question[item].score}} </div>
<br><br>
</template>

[Max]

I think you need to specify a unique ID, along the lines of :

<template repeat="{{item, itemIndex in items}}">

<div id="in{{itemIndex}}"), and then add some styles for them (#in1 { color: blue }).

I suppose you could also use this.$.parentelement.querySelector(':nth-child(2)'), or something.

Max.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ba1f9126-96d1-451e-9098-0b53219246be%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Arthur Evans]

Another approach is just to use data binding to add or remove an attribute or class. For example:

<template repeat="{{ item in items }}">     

<div id="in" class="{{ passFail(user.question[item].score) }}" >q{{item}}<t>{{user.question[item].time}}<t>{{user.question[item].score}} </div>
<br><br>
</template>

Where passFail is a function that takes a score and returns a class name (such as "pass" or "fail").

http://jsbin.com/runura/1/edit?html,console,output

Or alternately:
<div id="in" someattr?="{{user.question[item].someval}}">q{{item}}

  <t>{{user.question[item].time}}
  <t>{{user.question[item].score}} </div>

... and style div[someattr]. 

This way you can just manipulate the model data instead of manipulating the DOM directly.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMZCrPjAbWALd5wiSk1DnkCSzjKA-4TyH4ZFZn9HC8OEOBTT6A%40mail.gmail.com.