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

Question

我只是想创建一个 repeat.for 循环，它会在我的应用程序中为表单中的 select 元素生成选项。我想添加 selected 属性到我的 select 元素的最后一个选项，但不知道如何管理它。我的 select 的代码如下所示：

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

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

numPlayers = [2, 3, 4];

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

Answer 1

你需要的是像这样在循环中比较 $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>

Answer 2

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

举个例子：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;
}

更多关于绑定 select 元素的信息：http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.4/doc/article/cheat-sheet/5

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

Conditionally add attribute in select option with Aurelia

html

javascript

aurelia