web-dev-qa-db-ja.com

Aureliarepeat.forでCSSクラスを条件付きで追加または削除するにはどうすればよいですか？

<select>を構築しているものの配列があり、CSSを使用してfirstアイテムを無効としてマークできるようにしたいのですが、構文を正しく取得できません。

これが私が持っているものです：

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

[〜＃〜] here [〜＃〜] は、テストベッドとして使用できるほど類似したPlunkerです。

何が足りないのですか？

aurelia
10
MaYaN

あなたの例は完全ではありませんが、次のようになるはずです。

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

また、VMにfirstプロパティがある場合、たとえばstuffのように次のように記述します。

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

更新：

プランカー（ http://plnkr.co/edit/2xywp ）

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

ここで構文が間違っています：class="${${first} ? 'disabled selected hidden' : ''"はclass="${ $first ? 'disabled selected hidden' : '' }"である必要があります

Aureliaのドキュメントから：

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.
17
valichek