Angularjs Kendo UI 多选分组不起作用

Question

我将 Kendo 多选与 Angular-Kendo 指令和远程数据源一起使用。我正在尝试对结果进行分组，例如:this Demo , 但分组不起作用？

    <select kendo-multi-select k-options="selectCataloguesOptions" k-ng-model="selectedCataloguesIds">
</select>
<p ng-show="selectedCataloguesIds.length" style="padding-top: 1em;">Selected: {{ selectedCataloguesIds }}</p>

$scope.CataloguesDataSource = new kendo.data.DataSource({            
            transport: {
                read: {
                    url: BaseURL + 'api/Catalogue/Get',
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8'
                },
            },
            group: { field: "RootCatalogueName" }        
        });

        $scope.selectCataloguesOptions = {
            placeholder: "Select Catalogues...",
            dataTextField: "ItemsCatalogueName",
            dataValueField: "ItemsCatalogueId",
            dataSource: $scope.CataloguesDataSource
        };

Answer 1

您的代码没问题。您在 fiddle 中引用的剑道版本不支持此功能。我 fork 了 fiddle here并更新至2015.2.805。以下是更新后的链接:

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>