结合剑道UI网格列标头在AngularJs范围 [英] Binding kendo ui grid columns headers to the scope in AngularJs

问题描述

我使用的是剑道的UI网格，我想的列标题绑定到一个JSON文件，而不是直接在控制器指定它的。

I'm using a kendo ui grid, and I want to bind the columns headers to a json file, instead of specifying it directly in the controller.

我创建了一个成功的检索JSON文件阵列功能，并填充范围：

I created a function that successfully retrieves the array from the json file, and populate the scope:

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

和网格的选项，我指的列变量的范围：

And in the grid's options I'm referring the columns to that variable in the scope:

        $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
    ....
    ....

但绑定不踢，不更新的头。

But the binding doesn't kick in, the headers are not updated.

谢谢！

推荐答案

假设你只加载头一次，它的好隐藏的表，直到头的负载，抛出一个 NG-IF = myHeaders到剑道的UI元素电网从 $ scope.options 删除列，并使用 K-列而不是元素。

Assuming you're only loading the headers once and it's okay to hide the table until the headers load, throw an ng-if="myHeaders" onto the kendo-ui grid element, remove columns from $scope.options and use k-columns on the element instead.

所以：

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

变成了：

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

这篇关于结合剑道UI网格列标头在AngularJs范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！