Angolare2: come eseguire il binding per selezionare più elementi

Ecco una implementazione di liste a selezione multipla che supporta l’associazione dati bidirezionale. Io uso @ViewChild invece di getElementById() .

 @Component({ selector: 'my-app', template: `{{title}}
   {{item.name}}   
select 1 and 3 
{{selectedValues | json}}` }) export class AppComponent { @ViewChild('select') selectElRef; title = "Angular 2 beta - multi select list"; myOptions = [ {value: 1, name: "one"}, {value: 2, name: "two"}, {value: 3, name: "three"}]; selectedValues = ['1','2']; myModelProperty = this.myOptions[0]; constructor() { console.clear(); } ngAfterViewInit() { this.updateSelectList(); } updateSelectList() { let options = this.selectElRef.nativeElement.options; for(let i=0; i < options.length; i++) { options[i].selected = this.selectedValues.indexOf(options[i].value) > -1; } } change(options) { this.selectedValues = Array.apply(null,options) // convert to real Array .filter(option => option.selected) .map(option => option.value) } changeOptions() { this.selectedValues = ['1','3']; this.updateSelectList(); } } 

Plunker

Ogni volta che la proprietà selectedValues viene modificata da qualche componente logico, deve essere chiamato anche updateSelectList() , come mostrato nella logica di callback del pulsante “select 1 and 3”.

Per un più facile riutilizzo, questo dovrebbe probabilmente essere refactored in una direttiva di attributo. (Qualsiasi acquirente?)

Perché tutte quelle complicate risposte sulla semplice domanda.

Se hai in anticipo opzioni da selezionare, puoi farlo semplicemente in questo modo:

Questo codice è buono :

HTML

  {{item.name}}  

ANGOLARE

 myModelProperty: any; myModelProperty = ['YOUR_VALUE', 'YOUR_VALUE']; 

o se hai una stringa , puoi analizzarla

 myModelProperty: any; myModelProperty = string.split(','); 

Quindi, tutto quello che devi fare è che [(ngModel)] dal tag select, deve essere inizializzato in una parte angular con una serie di valori che corrispondono a [valore] dal tag option

Questo selezionerà automaticamente una o più opzioni dipende dai valori dell’array.

Come altri hanno già detto, non è ancora supportato di default in Angular2. Ho pensato di postare questo, sembra una soluzione molto più semplice. Ecco un esempio HTML:

  {{item.name}}  

E myClass con una funzione setSelected :

 ... export class myClass { ... myOptions: []; ... setSelected(selectElement) { for (var i = 0; i < selectElement.options.length; i++) { var optionElement = selectElement.options[i]; var optionModel = this.myOptions[i]; if (optionElement.selected == true) { optionModel.selected = true; } else { optionModel.selected = false; } } } } ... 

Ogni volta che hai bisogno di un riferimento agli elementi selezionati, puoi usare:

 var selectedItems = this.myOptions.filter((item) => { return item.selected === true; }); 

Potresti implementare il tuo come nel mio plnkr. AGGIORNATO perché CHOW voleva l’esempio senza jquery.

http://plnkr.co/edit/Pf92XATg3PT5RtBvrsaA?p=preview

 //our root app component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], styles:['.options{cursor:pointer;padding:10px;border-bottom:1px solid black;}', '.multiple-select{overflow-y:scroll; height:100px;}'], template: ` 
{{selected|json}}
 
 
{{athlete.name}}
 
 `, directives: [] }) export class App { public athletes:any[]=[]; public selected:any[]=[]; constructor() { for(var i = 1; i <= 5; i++){ this.athletes.push({ value:i, name:("athlete-"+i), id:("id-"+i) }) } } toggleMultiSelect(event, val){ event.preventDefault(); if(this.selected.indexOf(val) == -1){ this.selected = [...this.selected, val]; var elem = document.getElementById(val.id); elem.className += " fa fa-check"; }else{ var elem = document.getElementById(val.id); elem.className = elem.className.split(' ').splice(0, elem.className.split(' ').length - 2).join(' '); this.selected = this.selected.filter(function(elem){ return elem != val; }) } } } 

Un altro modo per scegliere / selezionare più opzioni utilizzando puro javascript in angular2. ecco il codice che dobbiamo scrivere nel file .html:

  
 
  Select Batch  
 
 
 
  {{batch.batch_name}} 
 
  

css è qui: –

 .multiselect { width: 200px; } .selectBox { position: relative; } .selectBox select { width: 100%; font-weight: bold; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } 

nel file .ts o nel costruttore dobbiamo scrivere:

 batchEvent:boolean= false; // Function for Multiple Select options checkbox area // showCheckboxes(ids, flag) { let checkboxes = document.getElementById(ids); if (!flag) { checkboxes.style.display = "block"; } else { checkboxes.style.display = "none"; } } batchSelectedholiday(id, value) { // console.log(id, value); if ((document.getElementById(id)).checked == true) { this.batchHoliday_array.push(value); } else if ((document.getElementById(id)).checked == false) { let indexx = this.batchHoliday_array.indexOf(value); this.batchHoliday_array.splice(indexx, 1); } console.log(this.batchHoliday_array, "batchHoliday_array"); } 

Usa ng-select

qui gli elementi sono una matrice che si desidera visualizzare come evento list.remove quando si deseleziona l’elemento selezionato element.selected Elemento selezionato element.selected quando si seleziona qualcosa dagli elementi della matrice

Risposta aggiunta da Sonali rupela