具有多个剑道自动完成字段的单页

Question

有没有办法让我在单个页面上使用不同的 K 选项（数据源）指定多个自动完成元素？每当用户从第一个自动完成字段中选择一个项目并导航到第二个自动完成字段以选择另一个项目时，从第一个自动完成字段中选择的记录就会消失。

如果第一个和第二个自动完成元素的 k-options 属性相同，那么记录似乎不会从第一个自动完成字段中消失？我认为这与第一个和第二个自动完成元素中的数据源不同...

$scope.select1Options = {
            placeholder: "Search Par...",
            noDataTemplate: 'No Partner's found',
            dataTextField: "Name",
            dataValueField: "Id",
            valuePrimitive: false,
            autoBind: false,
            //filter: "contains",
            //animation: {
            //    close: {
            //        effects: "fadeOut zoom:out",
            //        duration: 300
            //    },
            //    open: {
            //        effects: "fadeIn zoom:in",
            //        duration: 300
            //    }
            //},
            minLength: 3,
            dataSource: {
                //type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10,
                filtering: function (e) {
                    var filter = e.filter;

                    if (!filter.value) {
                        //prevent filtering if the filter does not value
                        e.preventDefault();
                    }
                },
                transport: {

                    read: {
                        url: "/Partner/Configuration/GetPartners",
                        type: 'GET',
                        dataType: 'json'
                    }, 
                    parameterMap: function (options, type) {
                        if (type === "read") {
                            var paramMap = kendo.data.transports.odata.parameterMap(options);
                            delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                            delete paramMap.$format; // <-- remove format parameter.
                            return { searchCriteria: options.filter.filters[0].value };
                        }
                    },
                    schema: {
                        data: function (data) {
                            return data; // <-- The result is just the data, it doesn't need to be unpacked.
                        },
                        total: function (data) {
                            return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                        }
                    }
                }


            },
            select: function(e) {

                $('select[name="multi_select1[]"]').change(function() {
                    $scope.partner = $(this).val();
                });
            }
        };

        $scope.select2Options = {
            placeholder: "Search Emp...",
            noDataTemplate: 'No Employers&apos;s found',
            dataTextField: "Name",
            dataValueField: "EmpId",
            valuePrimitive: false,
            autoBind: false,
            //filter: "contains",
            //animation: {
            //    close: {
            //        effects: "fadeOut zoom:out",
            //        duration: 300
            //    },
            //    open: {
            //        effects: "fadeIn zoom:in",
            //        duration: 300
            //    }
            //},
            minLength: 3,
            dataSource: {
                //type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10,
                filtering: function (e) {
                    var filter = e.filter;

                    if (!filter.value) {
                        //prevent filtering if the filter does not value
                        e.preventDefault();
                    }
                },
                transport: {

                    read: {
                        url: "/Partner/Configuration/GetEmployers",
                        type: 'GET',
                        dataType: 'json'
                    },
                    parameterMap: function (options, type) {
                        if (type === "read") {
                            var paramMap = kendo.data.transports.odata.parameterMap(options);
                            delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                            delete paramMap.$format; // <-- remove format parameter.
                            return { searchText: options.filter.filters[0].value };
                        }
                    },
                    schema: {
                        data: function (data) {
                            return data; // <-- The result is just the data, it doesn't need to be unpacked.
                        },
                        total: function (data) {
                            return data.length; // <-- The total items count is the data length, there is no .Count to unpack.
                        }
                    }
                }


            },
            select: function (e) {

                $('select[name="multi_select2[]"]').change(function () {
                    $scope.employer = $(this).val();
                });
            }
        };

<select kendo-multi-select k-options="select1Options" k-ng-model="configuration" k-min-length="3" name="multi_select1[]" class="form-control" ></select>

 <select kendo-multi-select k-options="select2Options" k-ng-model="configuration" k-min-length="3" name="multi_select2[]" class="form-control" ></select>

Answer 1

我发现了问题，这是因为两个剑道自动完成实例具有相同的 k-ng-model 属性。不幸的是，在我的情况下，两者都需要指向相同的 ng-model，但它们中的 datatext 字段是不同的。我们如何解决这个问题？？