如何将此jQuery代码转换为Angular 2？

基于Mark Rajcok的回答是：

Angular2: how bind to select multiple

你可以这样在模板实现此功能：

<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 &raquo;</a> 
    <a (click)="removeElements()" id="btn-remove">&laquo; 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 08:10:08

一般的经验法则：使用Angular2时，也请不更动的DOM，但只有操纵你的数据，并让Ang2使用其数据绑定来完成剩下的工作。这意味着我绝不会考虑在这里使用jQuery。

的方法采取的是：

添加一些数据存储到您的组件（或者你的组件使用的服务）。这可以像两个列表中的两个数组一样简单。
修改您的模板，以便使用数据存储构建两个表单元素。
当用户使用2个按钮中的1个触发某个操作时，请相应地更改数据存储。
就是这样。 Ang2会为你做所有的工作。

来源

2016-04-26 07:30:32 BlueM

如何将此jQuery代码转换为Angular 2？

回答

相关问题