我遵循下面的jQuery示例将其转换为角2。有什么方法可以做到吗?我应该在角2中集成jQuery,还是在角2中集成任何方式来实现这个目标?
示例URL:
http://www.designchemical.com/blog/index.php/jquery/create-add-remove-select-lists-using-jquery/
演示输出:list.htm
发布于 2016-04-26 08:10:08
根据Mark Rajcok的回答:
您可以在模板中以这种方式实现此特性:
<form>
<fieldset>
<select name="selectfrom" id="select-from" multiple size="5" (change)="changeSelectFrom($event.target.options)">
<option *ngFor="#elt of selectFromValues" [value]="elt.value">{{elt.name}}</option>
</select>
<a (click)="addElements()" id="btn-add">Add »</a>
<a (click)="removeElements()" id="btn-remove">« Remove</a>
<select name="selectto" id="select-to" multiple size="5" (change)="changeSelectTo($event.target.options)">
<option *ngFor="#elt of selectToValues" [value]="elt.value">{{elt.name}}</option>
</select>
</fieldset>
</form>在构成部分中:
@Component({
(...)
})
export class App {
@ViewChild('select-from') selectFromElRef;
@ViewChild('select-to') selectToElRef;
constructor() {
this.selectFromValues = [
{ value: '1', name: 'Item 1' },
{ value: '2', name: 'Item 2' },
{ value: '3', name: 'Item 3' },
{ value: '4', name: 'Item 4' }
];
this.selectToValues = [
{ value: '5', name: 'Item 5' },
{ value: '6', name: 'Item 6' },
{ value: '7', name: 'Item 7' }
];
}
getSelectedElements(options, values) {
return Array.apply(null, options)
.filter(option => option.selected)
.map(option => {
return values.find((elt) => elt.value === option.value);
});
}
changeSelectFrom(options) {
this.fromValues = this.getSelectedElements(options, this.selectFromValues);
}
changeSelectTo(options) {
this.toValues = this.getSelectedElements(options, this.selectToValues);
}
addElements() {
this.fromValues.forEach((elt) => {
this.selectToValues.push(elt);
let index = this.selectFromValues.findIndex((elt1) => elt1.value === elt.value);
this.selectFromValues.splice(index, 1);
});
}
removeElements() {
this.toValues.forEach((elt) => {
this.selectFromValues.push(elt);
let index = this.selectToValues.findIndex((elt1) => elt1.value === elt.value);
this.selectToValues.splice(index, 1);
});
}
}参见这个plunkr:https://plnkr.co/edit/5SQVErbgDaTyvHnjw7Wh?p=preview
发布于 2016-04-26 07:30:32
一个普遍的经验法则是:在使用Angular2时不要乱搞DOM,而只是操纵您的数据,让Ang2使用它的数据绑定来完成其余的操作。这意味着我甚至不会考虑在这里使用jQuery。
应采取的办法是:
https://stackoverflow.com/questions/36857605
复制相似问题