angularjs - KendoUI 下拉过滤器不适用于 AngularJS
问题描述
我尝试将过滤器添加到 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。
解决方案
您错误地放置了“过滤器”属性。请参阅演示指南。
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",
}
}
};
}]);
推荐阅读
- java - 如何计算两个瞬间之间的能量消耗?
- c# - C# Linq PDF 文件写入/读取 SQL Server 数据库
- angular - 如何将值传递给验证器以便在角度 5 中保存服务调用?
- java - 如何清除 JTextPane 中的所有样式?
- vb.net - Vb.net TableLayoutPanel 行重叠,而每隔一个交替行控件可见真/假
- excel - Excel 计算样式和文本内容
- python-3.x - shuffle 数据帧的索引顺序
- java - 如何在 @WebMvcTest 单元测试中将 PersistentEntityResourceAssembler 注入到自定义 @RepositoryRestController 的请求方法中
- angular - 主题概述 mat-input box、mat-select 和 mat-paginator
- android - Android Studio 3.2.1 升级后的构建错误