如何有条件地添加或删除Aurelia repeat.for中的CSS类？

Question

我有一堆东西，我正在构建一个<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很相似，可以用来作为一个试验台。

我错过了什么？

Answer 1

您的例子并不充分，但我想应该是这样的：

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

此外，如果有first酒店在VM，像stuff你写：

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> 

你只在这里错误的语法：class="${${first} ? 'disabled selected hidden' : ''"应该class="${ $first ? 'disabled selected hidden' : '' }"

从奥里利亚文档：

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.