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>