对于想了解Angular4_checkbox双向绑定的读者，本文将是一篇不可错过的文章，我们将详细介绍angularcheckbox双向绑定，并且为您提供关于Angular2–Checkbox未保持同
对于想了解Angular4_checkbox双向绑定的读者，本文将是一篇不可错过的文章，我们将详细介绍angular checkbox双向绑定，并且为您提供关于Angular 2 – Checkbox未保持同步、Angular 2 – ngModel不检查Checkbox、angular raido checkbox select取值的实例介绍、angular – primeng checkbox ngmodel不是已知属性的有价值信息。
本文目录一览：- Angular4_checkbox双向绑定（angular checkbox双向绑定）
- Angular 2 – Checkbox未保持同步
- Angular 2 – ngModel不检查Checkbox
- angular raido checkbox select取值的实例介绍
- angular – primeng checkbox ngmodel不是已知属性
Angular4_checkbox双向绑定（angular checkbox双向绑定）
Angular 2 – Checkbox未保持同步
我有一个复选框列表.我试图在未检查到最后的复选框时检查所有的复选框.
HTML
<div *ngFor="let filter of filters">
<label htmlFor="check-Box-{{filter.text}}"
[ngClass]="(filter.selected)? 'active' : '' ">
<input type="checkBox"
name="check-Box-{{filter.text}}"
[checked]="filter.selected"
(change)="onSelectFilter(filter)"
attr.id="check-Box-{{filter.text}}">
{{filter.selected}} - ({{filter.counter}})
</label>
</div>
TS
onSelectFilter(filter: Filter){
filter.toggleSelection();
let isAnyFilterSelected = this.filters.find(filter => filter.selected);
// If no filter is selected then ALL filters are selected
if(!isAnyFilterSelected){
this.filters.forEach(filter => filter.selected = true );
}
}
我为它创造了一个plunker.
https://plnkr.co/edit/uzF6Lk5fxRZjXBOaS9ob?p=preview
如果取消选中CHECKED属性为TRUE的唯一复选框,我希望所有复选框都具有CHECKED属性.这不会发生.
有任何想法吗？
解决方法
<div *ngFor="let filter of filters">
<label htmlFor="check-Box-{{filter.text}}"
[ngClass]="(filter.selected)? 'active' : '' ">
<input type="checkBox"
name="check-Box-{{filter.text}}"
[ngModel]="filter.selected"
(ngModelChange)="onSelectFilter($event,filter)"
attr.id="check-Box-{{filter.text}}">
{{filter.selected}} - ({{filter.counter}})
</label>
</div>
onSelectFilter(selected:boolean,filter: Filter){
filter.selected=selected;
if(this.filters.every(filter=>!filter.selected)){
setTimeout(()=>{
this.filters.forEach(filter=>filter.selected=true);
});
}
}
plunkr
“为什么需要这么多诡计呢？”
实际上,因为从变换检测器的角度来看,先前状态和新状态之间没有变化.
因此,不需要更新子项的@input()/调用ControlValueAccessor的writeValue()方法(< input type =“checkBox”[ngModel] =“foo”>).
使用setTimeout,首先将属性更新为false,然后将其更改延迟回初始状态,从而允许新的更改检测周期.
另请注意,像(ngModelChange)这样的事件与更改检测周期无关.
没有setTimeout()：
在这里,我们将得到与您的示例相同的结果,当我们保持foo为真时,复选框将不会更新：
代码(plunkr)：
@Component({
selector: 'my-app',template: `
<input id="foo" type="checkBox" [ngModel]="foo" (ngModelChange)="fooChange($event)"><label for="foo">{{foo}}</label>
`,})
export class App {
filters:[];
foo=true
fooChange(newValue:boolean){
if(newValue===false)
this.foo=true; // if newValue is false,foo becomes true
else
this.foo = newValue; // otherwise,do change
}
}
引擎盖下发生了什么：
使用setTimeout()
这次我们将使用setTimeout延迟将值重置为下一个tick：
代码(plunkr)：
@Component({
selector: 'my-app',})
export class App {
filters:[];
foo=true
fooChange(newValue:boolean){
this.foo=newValue; // we need to make it change !
setTimeout(()=>{
if(newValue===false)
this.foo=true; // if newValue is false,do change
})
}
}
引擎盖下发生了什么：
Angular 2 – ngModel不检查Checkbox
我现在拥有的是：
在复选框的标签旁边有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]指令将状态反映到复选框即可
>您不想在此处使用“for”属性,因为您已经在标签上定义了一个点击.这将触发2次点击而不是一次(“for”属性为1次,“click”事件为1次)
我用一个工作示例更新了你的plunker
http://plnkr.co/edit/y8qAbkBljG1TbVu5TKMX?p=preview
angular raido checkbox select取值的实例介绍
radio
{{modelName}}<div>
<label>
<input> //因为单选 ng-model为同一个值，value是选中时候获取到的值
<i></i>11</label>
</div>
<div>
<label>
<input>
<i></i>22</label>
</div>checkbox
{{ckone}} ,{{cktwo}}<div>
<label>
<input> //多选时 model名不同 ng-true-value：选中的时候值 ng-false-value：取消选择的值
<span><i></i></span>
</label>
</div>
<div>
<label>
<input>
<span><i></i></span>
</label>
</div>select
{{selectData}}<select>
<option>{{item.name}}</option></select>以上就是angular raido checkbox select取值的实例介绍的详细内容，更多请关注php中文网其它相关文章！
angular – primeng checkbox ngmodel不是已知属性
我收到以下错误
Can't bind to 'ngModel' since it isn't a kNown property of 'p-checkBox'.
我在app.module.ts中添加了通用模块,表单模块,但它仍然无法正常工作
解决方法
ngModel is part of FormsModule,that is why you will need to import FormsModule from @angular/forms and add it inside imports Metadata option of NgModule. After doing this,you should be able to use ngModel directive in the templates that belong to the module where FormsModule was imported.
mymodule.module.ts
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [CommonModule,FormsModule,...
我们今天的关于Angular4_checkbox双向绑定和angular checkbox双向绑定的分享已经告一段落，感谢您的关注，如果您想了解更多关于Angular 2 – Checkbox未保持同步、Angular 2 – ngModel不检查Checkbox、angular raido checkbox select取值的实例介绍、angular – primeng checkbox ngmodel不是已知属性的相关信息，请在本站查询。
本文标签：
