Question

我尝试将过滤器添加到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。

Answer 1

您错误地放置了“ filter”属性。请参阅demo guide。

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

<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

KendoUI下拉过滤器不适用于AngularJS

1 个答案: