Angularjs Kendo UI多选分组不起作用

Question

我正在使用带有 Angular-Kendo 指令和远程数据源的 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

您的代码很好。您在小提琴中引用的剑道版本不支持此功能。我将小提琴 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>