Angular 2 – ngModel不检查Checkbox
发布时间:2020-12-17 17:27:17 所属栏目:安全 来源:网络整理
导读:我正在尝试创建一个性别选择视图,包括男性,女性和其他(caitlyn jenner类型的东西). 我现在拥有的是: 在复选框的标签旁边有SVG(复选框将隐藏在生产中,现在在plunkr中可见,用于调试目的) 但当我点击“女性”时,它会将焦点更改为复选框而不是检查它. Plunkr:h
我正在尝试创建一个性别选择视图,包括男性,女性和其他(caitlyn jenner类型的东西).
我现在拥有的是: 在复选框的标签旁边有SVG(复选框将隐藏在生产中,现在在plunkr中可见,用于调试目的) 但当我点击“女性”时,它会将焦点更改为复选框而不是检查它. Plunkr:http://plnkr.co/edit/Z0Dq2sfJaBrE6Mae2Kg1?p=info 码: CSS svg { width: 15px; height: 15px; border: 2px solid #a13b4a; } label { display: inline-block; padding-left: 1.5em; position: relative; cursor: pointer; color: black; } input[type="checkbox"] { opacity: 0; width: 15px; height: 15px; } label svg path { transition: stroke-dashoffset .4s linear; } input[type="checkbox"]:checked ~ label svg path { stroke-dashoffset: 0; } input[type="checkbox"]:checked ~ label { color: #a13b4a; } HTML <div> <input type="checkbox" id="male" [(ngModel)]="isMale" name="isMale"/> <label (click)="select('male')" for="male">Male <svg (click)="select('male')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,2 C13.4580219,4.16027394 1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 41.321398,1.67860195 39,4 C36.1186011,6.88139893.11316157,27.1131616 5,29 C10.3223659,34.3223659 30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 17,34 C17,40.4724865 54,12.4064021 54,17 C54,23.7416728 34,27.2286213 34,37" id="male-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg> </label> </div> <div> <input type="checkbox" id="female" [(ngModel)]="isFemale" [checked]="isFemale" name="isFemale"/> <label for="female" (click)="select('female')">Female <svg (click)="select('female')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,37" id="female-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg> </label> </div> <div> <input type="checkbox" id="other" [(ngModel)]="isOther" name="isOther"/> <label for="other" (click)="select('other')">Other <svg (click)="select('other')" viewBox="0 0 60 40" xmlns="http://www.w3.org/2000/svg"><path d="M21,37" id="other-path" stroke-width="4" fill="none" stroke="#a14b4a" stroke-dasharray="270" stroke-dashoffset="270"></path></svg> </label> </div> TS public isMale:boolean; public isFemale:boolean; public isOther:boolean; constructor() { this.isMale = true; this.isFemale = false; this.isOther = false; } select(gender:string){ console.log("switch"); switch(gender){ case 'male': { console.log("male"); this.isMale = true; this.isOther = false; this.isFemale = false; break; } case 'female' : {console.log("female"); this.isFemale = true; this.isOther = false; this.isMale = false; break; } default: {console.log("default"); this.isFemale = false; this.isMale = false; this.isOther = true; } } console.log("status: male:"+this.isMale+";;female:"+this.isFemale+";;other:"+this.isOther); } 解决方法
您的实施有两个问题.
>您不想在此处使用[(ngModel)],因为您正在更新控制器中的值.只需使用[checked]指令将状态反映到复选框即可 我用一个工作示例更新了你的plunker http://plnkr.co/edit/y8qAbkBljG1TbVu5TKMX?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |