aurelia 绑定到复选框
示例
基本复选框
export class MyViewModel {
favoriteColors = [];
colors = ['Red', 'Yellow', 'Pink', 'Green', 'Purple', 'Orange', 'Blue'];
}<template>
<label repeat.for="color of colors">
<input type="checkbox" value.bind="color" checked.bind="favoriteColors" />
${color}
</label>
<p>Favourite colors:</p>
<ul if.bind="favoriteColors">
<li repeat.for="color of favoriteColors">${color}</li>
</ul>
</template>带有对象数组的复选框
export class MyViewModel {
people = [];
selectedPeople = [];
constructor() {
this.people= [
{name: 'John Michaels'},
{name: 'Gary Stevens'},
{name: 'Carrie Smitch'},
{name: 'Jesus Wohau'}
];
}
}<template>
<label repeat.for="person of people">
<input type="checkbox" model.bind="person" checked.bind="selectedPeople" />
${person.name}
</label>
<p>Selected people:</p>
<ul if.bind="selectedPeople">
<li repeat.for="person of selectedPeople">${person.name}</li>
</ul>
</template>带有布尔值的复选框
export class MyViewModel {
agreeToTerms = false;
}<template>
<label><input type="radio" name="terms" model.bind="true" checked.bind="agreeToTerms" />Yes</label>
<label><input type="radio" name="terms" model.bind="false" checked.bind="agreeToTerms" />No</label>
<br><br>
<strong>${agreeToTerms ? 'I agree' : 'I disagree'}</strong>
</template>