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>