将 kendo ui 网格列标题绑定到 AngularJs 中的范围答案

【问题标题】：Binding kendo ui grid columns headers to the scope in AngularJs将 kendo ui 网格列标题绑定到 AngularJs 中的范围
【发布时间】：2014-05-14 15:43:34
【问题描述】：

我使用的是 kendo ui 网格，我想将列标题绑定到 json 文件，而不是直接在控制器中指定它。

我创建了一个函数，它成功地从 json 文件中检索数组，并填充范围：

        function returnColumns(){
            $http.get('app/data/headers.json')
                    .then(function(res){
                        $scope.myHeaders = res.data;
                    });
        }
        returnColumns();

在网格的选项中，我将列引用到范围内的该变量：

        $scope.options = {
            dataSource: {
                type: "json",
                transport: {
                    read: "app/data/myData.json"
                },
                pageSize: 10,
                schema  : {
                    data: "mySchema"
                }
            },
            sortable: true,
            pageable: true,
            resizable: true,
            columns:$scope.myHeaders
    ....
    ....

但是绑定没有启动，标题没有更新。

谢谢！

【问题讨论】：

标签： json angularjs kendo-ui grid

【解决方案1】：

假设您只加载一次标题并且在标题加载之前隐藏表格是可以的，将ng-if="myHeaders" 扔到 kendo-ui 网格元素上，从$scope.options 中删除列并使用k-columns元素。

所以：

<div kendo-grid k-options="options"></div>

变成：

<div kendo-grid k-options="options" k-columns="myHeaders" ng-if="myHeaders"></div>

【讨论】：