2017-07-26 3 views
0

Hallo ich bin zwei Kendo ui drodDownList:Zur gleichen Zeit kann nicht zwei identische Elemente in Dropdownlist ausgewählt werden

kendo-drop-down-list(
    ng-model = 'vm.firstList' 
    k-data-source='vm.filterData' 
    k-data-text-field='"title"' 
    k-data-value-field='"name"' 
    k-value-primitive='true' 
    k-filter='"contains"' 
    k-on-change='vm.onChange($event)' 
) 

und

kendo-drop-down-list(
    ng-model = 'vm.secondList' 
    k-data-source='vm.filterData' 
    k-data-text-field='"title"' 
    k-data-value-field='"name"' 
    k-value-primitive='true' 
    k-filter='"contains"' 
    k-on-change='vm.onChange($event)' 
) 

es ist Quelle Daten:

this.filterData = [ 
     { name: 'Brown', title: 'Soier' }, 
     { name: 'Maks', title: 'Inkl' }, 
     { name: 'Lint', title: 'Baks' }, 
     { name: 'Hover', title: 'Niyou' } 
    ] 

sie haben die gleiche Datenquelle, und ich bin wollen bei der Auswahl Element in der ersten dd dann entfernen Sie dieses Element aus anderen dd (und likewis e für die Sekunde). Gleichzeitig können zwei identische Elemente nicht ausgewählt werden.

+0

in Ihrer OnChange-Funktion, suchen Sie, was Sie auswählen und entfernen Sie es aus einem anderen filterData –

+0

Ich möchte dieselbe dataSource verwenden, in Ihrer Lösung muss ich zwei dataSource für jeden dd verwenden? – user3045654

+1

ja. Das musst du wahrscheinlich. Damit das ng-Modell im ersten Dropdown die Auswahl behält, muss die Option vorhanden sein. Wenn Sie eine Option aus einem anderen Dropdown-Menü entfernen, wird das erste Dropdown-Menü erneut kompiliert und ng-model verliert die ausgewählte Option. –

Antwort

0

meine Lösung:

in erster dd add:

k-on-change='vm.onFirstSelect(kendoEvent)' 
k-data-source='vm.firstFilterElements' 

für die zweite dd:

k-on-change='vm.onSecondSelect(kendoEvent)' 
k-data-source='vm.secondFilterElements' 

in Controller add:

 this.filterElements = [ 
      { name: 'Brown', title: 'Soier' }, 
      { name: 'Maks', title: 'Inkl' }, 
      { name: 'Lint', title: 'Baks' }, 
      { name: 'Hover', title: 'Niyou' } 
     ] 

    this.firstFilterElements = this.filterElements; 
    this.secondFilterElements = this.filterElements; 

onFirstSelect(e) { 
    this.secondFilterElements = this.filterByItem(e); 
} 

onSecondSelect(e) { 
    this.firstFilterElements = this.filterByItem(e); 
} 

filterByItem (e) { 
    return this.filterElements.filter(function (el) { 
     return el.name !== e.sender.dataItem(e.item) 
      [e.sender.options.dataValueField]; 
    }); 
} 

wenn jemand kann es optimieren Ich werde froh sein)

Verwandte Themen