Template repeat inside template repeat - get all item names

Question

I'm trying to realise a website using polymer 1.0. I have a custom element my-greeting with some template repeats inside.

What I would like to do, and I don't find how to do this, is to get a string called TARGET which looks like :

/constantPath/folder1/aaa.jpg
/constantPath/folder1/bbb.jpg
/constantPath/folder2/aaa.jpg
/constantPath/folder2/bbb.jpg

So the general string is : /constantPath/{{repeat1.id}}/{{repeat2.id}}.jpg

How can I do that ??

Here is my code :

<dom-module id="my-greeting">
  <template>
    <template is="dom-repeat" items="{{repeat1}}">
      <template is="dom-repeat" items="{{repeat2}}">
        Target : <iron-image src="TARGET"></iron-image>
      </template>
    </template>
  </template>

  <script>
    Polymer({
      is: 'my-greeting',
      ready: function() {
        this.repeat1 = [
            {id: 'folder1'},
            {id: 'folder2'}
        ];
        this.repeat2 = [
            {id: 'aaa'},
            {id: 'bbb'}
        ];
      }
    }
    );
  </script>

Thanks.

Answer 1

Here you go:

<dom-module id="my-greeting">
  <template>
    <template is="dom-repeat" items="{{repeat1}}" as="folderOne">
      <template is="dom-repeat" items="{{repeat2}}" as="folderTwo">
        Target : <span>{{getTarget(folderOne, folderTwo)}}</span></br>
      </template>
    </template>
  </template>

  <script>
    Polymer({
      is: 'my-greeting',
      ready: function() {
        this.repeat1 = [
            {id: 'folder1'},
            {id: 'folder2'}
        ];
        this.repeat2 = [
            {id: 'aaa'},
            {id: 'bbb'}
        ];
      },
      getTarget: function(folderOne, folderTwo){
        return "/constantPath/"+folderOne.id+"/"+folderTwo.id;
      },
    }
    );
  </script>
</dom-module>