有条件地在Aurelia的select选项中添加属性

Question

我只是试图创建一个repeat.for循环，该循环将为我的应用程序中的表单中的select元素生成选项。 我希望将selected属性添加到我的select元素的最后一个选项中，但是无法弄清楚如何对其进行管理。 我选择的代码如下所示：

<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];

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

Answer 1

在选项元素上使用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;
}

有关绑定选择元素的更多信息，请参见： http : //aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.4/doc/article/cheat-sheet/5

Answer 2

您需要像这样在循环内将$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>