KendoUI 下拉过滤器不适用于 AngularJS

Posted 2023-05-07

【中文标题】KendoUI 下拉过滤器不适用于 AngularJS

【英文标题】：KendoUI dropdown filter doesn't work with AngularJS

【发布时间】：2019-09-17 04:19:33

【问题描述】：

我尝试将过滤器添加到 KendoUI 下拉列表中，但似乎无法正常工作。过滤器在没有角度的情况下工作正常。但是当我用 angular 添加它时，它不会在下拉列表中显示类型过滤器。我用的是官网的例子。

<div ng-controller='myctrl'>
    <h4 style="padding-top: 2em;">Remote data</h4>
    <select kendo-drop-down-list
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-data-source="productsDataSource"
            style="width: 100%">
    </select>
<div>

控制器

angular.module('myApp', ["kendo.directives"])
.controller('myctrl', ['$scope', function($scope) 
    $scope.productsDataSource = 
        type: "odata",
        serverFiltering: true,
        filter: "startswith",
        transport: 
            read: 
                url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",          
            
        
    ;    
]);

这是jsfiddle。

【参考方案1】：

您错误地放置了“过滤器”属性。请查看demo guide。

过滤器属性应该在 kendo-drop-down-list 元素中，但由于您没有将 kendo-drop-down-list 用作标记，而只是将其用作您需要添加的 select 元素的属性元素标签中的过滤器属性也是如此。见下文：

<select kendo-drop-down-list
    k-data-text-field="'ProductName'"
    k-data-value-field="'ProductID'"
    k-data-source="productsDataSource"
    filter="'startsWith'"
    style="width: 100%"></select>
<div>

当然，从你的角度模块中删除你的过滤器属性

angular.module('myApp', ["kendo.directives"])
    .controller('myctrl', ['$scope', function($scope) 
        $scope.productsDataSource = 
                type: "odata",
                serverFiltering: true,
                transport: 
                    read: 
                        url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                    
                
            ;
        ]);

见JSFilddle fork of your JSFiddle