Question

我只是想创建一个repeat.for循环，它将为我的应用程序中的表单中的select元素生成选项。我想添加selected 属性为我的选择元素的最后一个选项，但无法弄清楚如何管理它。我的选择代码如下：

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

我的view-model类的numPlayers属性只是一个简单的数组：

numPlayers = [2, 3, 4];

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

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>

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

2 个答案: