Sono in grado di associare ngModel
per una singola selezione, ma vorrei associare una matrice alle varie opzioni selezionate. Quando provo questo, ottengo l’errore
Imansible trovare un object di supporto diverso ‘xxx’ in ‘myModelProperty’
Il mio codice
{{item.name}}
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}}
{{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
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:
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}}
`, 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:
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