如何在 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' : ''}"

此外，如果您在 VM 上有 first 属性，例如 stuff，您可以写：

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

更新：

笨蛋 (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' : '' }"

来自 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.

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

How can I conditionally add or remove CSS classes in Aurelia repeat.for?

aurelia