kendo ui 列表视图 angular - 可选项目

Question

我有一个 kendo ui ListView 并且我想让项目可选择（单选）。我还没有在互联网上找到 angular.

的任何示例

我要做的就是给选中的item设置一个style，同时根据选中的item做一些调用。

这是我的HTML:

            <div class="list-group no-radius no-border no-bg m-b-none"
                 kendo-list-view="publishPositionsListView"
                 k-options="ctrl.publishPositionsSourceOptions"
                 k-data-source="ctrl.publishPositionsSource">

                <a class="list-group-item p-l hover-anchor b-a no-select ng-scope" k-template>
                    <span>{{dataItem.Title}}</span>
                </a>
            </div>

这是我的JavaScript:

vm.publishPositionsSource = new kendo.data.DataSource({
    dataType: "aspnetmvc-ajax",
    transport: {
        read: {
            url: "publish/getall",
            type: "GET"
        }
    },
    schema: {
        type: "json",
        data: "Data",
        total: "Total",
        model: {
            id: "Id"
        }
    }
});

vm.publishPositionsSourceOptions = {
    dataBound: function (e) {
        // Set selected style for the first item when loaded
        e.sender.element.children().first().addClass("focus");
    }
}

有什么想法吗？我想知道是否有一种方法可以代替使用 ng-click

Answer 1

要在 kendoUI 列表视图上启用单选，请将 selectable: "Single" 添加到您的列表视图配置中。您还可以使用列表视图的 select 方法以编程方式设置所选项目。

当你把它们放在一起时，它可能看起来像这样：

$scope.listViewOptions = {
    dataSource: $scope.myDataSource,
    selectable: "Single",
    dataBound: function(event) {
        /* Select the first item here */
    },
    change: function(event) {
        /* Do something with the selected item */
    }
}

我还创建了一个可用的 dojo（虽然它没有使用 angular）。

kendo ui 列表视图 angular - 可选项目

kendo ui listview with angular - selectable items

kendo-ui

angularjs

kendo-listview