Bind to text in <option>

Help Requests
1

What I’m trying to do is

          <select value.bind="costing.item" matcher.bind="dictionaryItemMatcher">
            <option repeat.for="item of dictionaryItems" model.bind="item">
                 <span if.bind="item.sector"> ${item.name} (${item.sector})</span>
                 <span else>${item.name}</span>
           </option>
          </select>

but it doesn’t seem that you can bind to the text of the <option>

I’ve also tried <option... value.bind="getText(item)">and (out of desperation!)

<option if.bind="item.sector" repeat.for="item of dictionaryItems" model.bind="item">${item.name} (item.sector)</option>
<option else repeat.for="item of dictionaryItems" model.bind="item">${item.name}</option>

I finally arrived at the following which works, but it is very messy

<select class="custom-select" value.bind="costing.item" matcher.bind="dictionaryItemMatcher">
    <option repeat.for="item of dictionaryItems" model.bind="item">${item.sector ? item.name + ' (' + item.sector + ')' : item.name}</option>
</select>

Is there a cleaner way to do this?

1 Like
2

I think your 4th example is fine, just need to do it in cleaner form. Though i got a working example for both 2nd and 4th examples of yours at https://codesandbox.io/s/p5vl1j214m

3

That’s great - many thanks.

Next question - is there any way to style the option - I know it’s not possible, but I was hoping that you guys had come up with some magic :grinning:

<option .... class.magicBinding="myClass"></option>
1 Like
4

Nope, that’s been heavily requested feature of web platform. You will have to use a custom combobox :smile:

You can take some inspiration here https://aurelia-portal-attribute.now.sh/

Or use a premade plugin, there are plenty

5

Oh - that’s excellent - I’ll play around with it.

Do you have a link to the css to get me started?