有條件地在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>