作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在处理一个表单,我正在使用 Angular Reactive Forms。我需要在我的表单中进行多项选择,我确实通过按 ctrl 并选择多个选项来完成它。我希望能够在不按 ctrl 键的情况下使用多选。有可能吗?
表单组件:
this.productForm = new FormGroup({
'items': new FormControl(this.product.items, Validators.required),
});
模板:
<div class="form-group">
<select multiple="multiple" class="form-control" id="items" formControlName="items" required>
<option *ngFor="let item of itemList" [value]="item.id">{{item.name}}</option>
</select>
</div>
更新:
我尝试了 greg95000 的解决方案,但它只是一个部分有效的解决方案。
<div class="form-group">
<select multiple="multiple" class="form-control" id="items" formControlName="items" required>
<option (mousedown)="onMouseDown($event)" (mousemove)="$event.preventDefault()" *ngFor="let item of items" [value]="item.id">{{item.name}}</option>
</select>
</div>
public onMouseDown(event: MouseEvent) {
event.preventDefault();
event.target['selected'] = !event.target['selected'];
}
这个解决方案打破了数据绑定(bind)
最佳答案
我有一个有效的解决方案。因为我复制数组 Angular 知道有变化所以选择得到更新。这是我的选择:
<select class="form-control" multiple name="positionTypes" [(ngModel)]="freelancer.positionTypes" #select1>
<option *ngFor="let positionType of positionTypes" [value]="positionType" (mousedown)="false"
(click)="positionTypMouseDown($event)">{{'PositionType.'+positionType | translate}}</option>
</select>
这是我组件中的函数:
positionTypMouseDown( event: any ) {
event.stopPropagation();
let scrollTop = 0;
if ( event.target.parentNode ) {
scrollTop = event.target.parentNode.scrollTop;
}
const stringValue = event.target.value.split( '\'' )[1];
const index = this.freelancer.positionTypes.indexOf( stringValue, 0 );
if ( index > -1 ) {
this.freelancer.positionTypes.splice( index, 1 );
} else {
this.freelancer.positionTypes.push( stringValue );
}
// to make angular aware there is something new
const tmp = this.freelancer.positionTypes;
this.freelancer.positionTypes = [];
for ( let i = 0; i < tmp.length; i++ ) {
this.freelancer.positionTypes[i] = tmp[i];
}
setTimeout(( function() { event.target.parentNode.scrollTop = scrollTop; } ), 0 );
setTimeout(( function() { event.target.parentNode.focus(); } ), 0 );
return false;
}
我现在更新了我的答案,它在 chrome 中也能正常工作。重要的部分是焦点和滚动不关注选项而是关注选择(即 event.target.parentNode
关于Angular 5 - 多选而不按Ctrl键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48318596/
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止,我在 Swift 中有这个: import Foundation import Cocoa e
我是一名优秀的程序员,十分优秀!