使用dom-repeat在纸张对话框上选中复选框时显示值的步骤如下:
<paper-dialog>
<template is="dom-repeat" items="{{checkboxes}}">
<paper-checkbox checked="{{item.checked}}">{{item.value}}</paper-checkbox>
</template>
</paper-dialog>
在上面的代码中,checkboxes
是一个数组,包含了复选框的值和选中状态。item.checked
用于绑定复选框的选中状态,item.value
用于显示复选框的值。
checkboxes
数组,并初始化复选框的值和选中状态。例如:this.checkboxes = [
{ value: '选项1', checked: false },
{ value: '选项2', checked: false },
{ value: '选项3', checked: false }
];
checked
属性的变化来更新显示的值。例如:Polymer({
...
observers: ['updateSelectedValues(checkboxes.*)'],
updateSelectedValues: function(changeRecord) {
// 遍历复选框数组,获取选中的值
var selectedValues = this.checkboxes.filter(function(item) {
return item.checked;
}).map(function(item) {
return item.value;
});
// 更新显示的值
this.selectedValues = selectedValues.join(', ');
}
});
在上面的代码中,updateSelectedValues
方法是一个观察者函数,当checkboxes
数组中的任何一个复选框的checked
属性发生变化时,该函数会被调用。函数中通过过滤选中的复选框,并将其值存储在selectedValues
数组中。然后,将selectedValues
数组中的值用逗号分隔并赋值给selectedValues
属性,以更新显示的值。
<paper-dialog>
<template is="dom-repeat" items="{{checkboxes}}">
<paper-checkbox checked="{{item.checked}}">{{item.value}}</paper-checkbox>
</template>
<div>选中的值:{{selectedValues}}</div>
</paper-dialog>
在上面的代码中,<div>选中的值:{{selectedValues}}</div>
用于显示选中的复选框的值。
这样,当用户在纸张对话框上选中或取消选中复选框时,选中的值会实时显示在页面上。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云