11

I have an array of stuff from which I am building a <select> and I want to be able to mark the first item as disabled using CSS, however I cannot get the syntax right.

Here's what I have:

<select select2 value.bind="selectedItem">
    <option repeat.for="item of stuff" model.bind="item" class="${${first} ? 'disabled selected hidden' : ''">
        ${item.key}
    </option>
</select>

HERE's a Plunker similar enough that can be used as a test-bed.

What am I missing?

MaYaN
  • 6,683
  • 12
  • 57
  • 109

1 Answers1

18

Your example is not full, but I guess it should look like:

class="${item.first ? 'disabled selected hidden' : ''}"

Also if you have first property at VM, like stuff you write:

class="${$parent.first == item? 'disabled selected hidden' : ''}"

UPDATE:

Plunker (http://plnkr.co/edit/2xywp0)

<option repeat.for="thing of things" model.bind="thing">${thing.name} ${$first | stringify}</option>

You just have wrong syntax here: class="${${first} ? 'disabled selected hidden' : ''" should be class="${ $first ? 'disabled selected hidden' : '' }"

From Aurelia docs:

Contextual items availabe inside a repeat template:

$index - The index of the item in the array.
$first - True if the item is the first item in the array.
$last - True if the item is the last item in the array.
$even - True if the item has an even numbered index.
$odd - True if the item has an odd numbered index.
valichek
  • 1,186
  • 6
  • 9
  • didn't work I am afraid :-( I have added a `Plunker` to make it easier to test. Please note that I would like to leverage the `$first` as included in the Aurelia doc instead of having to create another property on the VM. – MaYaN Dec 07 '15 at 11:38
  • 1
    It turned out I had 2 extra braces! so it should have been `${$first ?...` instead of `${${first} ?...` – MaYaN Dec 07 '15 at 11:53
  • yes, right syntax is `class="${ $first ? 'disabled selected hidden' : '' }"` – valichek Dec 07 '15 at 11:55