aurelia 绑定到选择元素
示例
字符串数组
在选择下拉列表中选择一个值并提供字符串数组时,所选值将作为字符串绑定到选择元素的value属性,我们可以使用字符串插值显示该字符串。
export class MyViewModel {
animals = [];
favouriteAnimal = null;
constructor() {
this.animals= [
'Cat',
'Dog',
'Fish',
'Rabbit',
'Tiger',
'Bat'
];
}
}<template>
${favouriteAnimal}
<select name="animals" value.bind="favouriteAnimal">
<option repeat.for="animal of animals">${animal}</option>
</select>
</template>对象数组
与上面的示例不同,当提供对象数组时,在下拉列表中选择一个值时,绑定到该特定选项的模型就是所提供的对象。
export class MyViewModel {
animals = [];
favouriteAnimal = null;
constructor() {
this.animals= [
{label: 'Cat', value: 99},
{label: 'Dog', value: 493},
{label: 'Fish', value: 934839200},
{label: 'Rabbit', value: 8311},
{label: 'Tiger', value: 22},
{label: 'Bat', value: 3711}
];
}
}<template>
<p>Favourite animal ID: ${favouriteAnimal.value}</p>
<p>Favourite animal name: ${favouriteAnimal.label}</p>
<select name="animals" value.bind="favouriteAnimal">
<option repeat.for="animal of animals" model.bind="animal">${animal.label}</option>
</select>
</template>