Geenrating ID for a StackLayout dynamically


#1

I have been trying to make the id for an element dynamically generated.

I have a list of elements and using ListView to display them.

I need a StackLayout to be dynamic to something like this


<Label text="{{'habit_' + id}}" />  <!-- This works and displays habit_1 , habit_2 -->

But this fails

<StackLayout id="{{'habit_' + id}}" />

#2

what is the error you are getting?


#3

The id is not get assigned
The id for all the elements comes out like this habit_{{id}}

I have tried all patterns, but that is always the id that gets assigned

id=“habit”+{{id}} , id=“habit_”+"{{id}}", id=“habit_{{id}}”


#4

How are you accessing the “id” value?

Usually in event method like “tap(args)” you have to access the “id” using “args.object.id” format.

Also note that if you assign the id using binding variable it gets evaluated on every event.


#5

So here is my data
my .js contains this in the vm
metaDataQuestionsList = [{“id”:1, “q”:“somethign here”},{“id”:2,“q”:“more”}]

and in my template

<ListView items="{{ metaDataQuestionsList }}" id="questionsList">
            <ListView.itemTemplate>
                <StackLayout class="list-group-item" orientation="vertical">
                    <Label class="h3" text="{{ q }}" textWrap="true" row="1" col="0"/>
                    <GridLayout rows="*" columns="*,*">
                        <!-- <Label text="{{'habit_' + id}}" row="0" col="0"/>, This works fine
                        <Label text="{{'quantity_' + id}}" row="0" col="1"/> -->
                        <StackLayout id="habit_"+id row="0" col="0"/>
                        <StackLayout id="quantity_{{id}}" row="0" col="1"/>
                    </GridLayout>
                </StackLayout>
            </ListView.itemTemplate>
        </ListView>

Both Stacklayout where id is to be assigned dynamically is not working.


#6

Check this, you have to use the syntax id="{{‘habit_’ + id}}"


#7

Okie this works. Its a weird syntax tough .

Thanks for the help. :slight_smile: