How to access $even of outer loop of nested repeat.for

Help Requests
1

I have a view/view-model that displays data with a nested repeat.for.

items.ts

public t_statuses = ["A - Status One", "B - Status Two", "C - Status Three", "D - Status Four"]
public t_items = ["Mickey","Minnie","Donald","Goofey","Daisy"]

items.html

<table>
    <thead>
        <tr>
            <th></th>
            <th repeat.for="s of t_statuses" 
                css="background-color: ${$even ? 'lightblue' : 'white'}" 
                colspan.bind = "t_items.length">${s}</th>
        </tr>
        <tr>
            <th>Diagnosis</th>
            <template repeat.for="s of t_statuses">
               <!-- I want to apply the same background color to these
                    headers based on if s is $even -->
                <th repeat.for="t of t_items"> 
                     <div>${t}</div>
                 </th>
             </template>
        </tr>
    </thead>
</table>

Notice in my html that I have a nested repeat.for. I want to set the background color of the inner elements based on whether the outer loop s of t_statuses is $even. If I use $even on the inner th element, it’s going to refer to t of t_items.

Is there a way to accomplish this?

1 Like
2

Have you tried $parent.$even?

2 Likes
3

I just tried that on a whim and it worked! Brilliant!

2 Likes
4

Here is the related docs entry https://aurelia.io/docs/binding/basics#contextual-properties

2 Likes