有条件地添加属性在选择选项与Aurelia

我只是试图创建一个repeat.for循环，这将生成在我的应用程序中的窗体中选择元素的选项。我希望将selected 属性添加到我select元素的最后一个选项，但无法弄清楚如何管理它。我的选择外观的代码如下：有条件地添加属性在选择选项与Aurelia

<select select class="browser-default" value.bind="maxPlayers"> 
    <option repeat.for="num of numPlayers" value.bind="num">${num}</option> 
</select>

和我的视图模型类的numPlayers属性只是一个简单的数组：

numPlayers = [2, 3, 4];

所以我的问题是我如何添加所选属性只有我的select元素中的最后一个选项元素？我知道有一个名为$ last的布尔值，它指示我是否在最后一个元素上，但我无法弄清楚如何正确地合并它。似乎我应该能够通过将selected.bind="$last"添加到选项元素来实现它，但这似乎没有任何效果。

来源

2016-04-07 KevinM

对选项元素使用model.bind。 HTMLOptionElement的value属性将所有值强制转换为字符串。

下面是一个例子：https://gist.run?id=9bdbf2518dbd1169d8607f712b09d41b

app.html

<template> 
    <select select class="browser-default" value.bind="maxPlayers"> 
    <option repeat.for="num of numPlayers" model.bind="num">${num}</option> 
    </select> 
</template>

app.js在这里结合中选择元素，

export class App { 
    numPlayers = [2, 3, 4]; 
    maxPlayers = 4; 
}

来源

2016-04-07 02:08:31

非常感谢你！我不知道我在文档中错过了什么。这正是我所需要的。如果您不介意，您是否能够解释绑定到模型属性时到底发生了什么？ – KevinM

您需要将$last变量与当前$index变量进行比较，如下所示。

<select select class="browser-default" value.bind="maxPlayers"> 
    <option repeat.for="num of numPlayers" value.bind="num" selected.bind="$index === $last">${num}</option> 
</select>

来源

2016-04-07 02:00:50 jsachs

有条件地添加属性在选择选项与Aurelia

回答

相关问题