Question

您好我有两个剑道ui drodDownList：

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)'
)

和

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)'
)

它是数据源：

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

他们有相同的数据源，我想在第一个dd中选择项目然后从其他dd中删除此项目（同样为第二个dd）。同时，无法选择两个相同的元素。

Answer 1

我的解决方案：

在第一个dd中添加：

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

第二个dd：

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

控制器中的

添加：

        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];
    });
}

如果有人可以优化它，我会很高兴）

同时，dropDownList中无法选择两个相同的元素

1 个答案: