剑道数据源,AngularJS-未定义属性

剑道数据源,AngularJS-未定义属性,angularjs,kendo-ui,kendo-datasource,kendo-observable,Angularjs,Kendo Ui,Kendo Datasource,Kendo Observable,我想用从Web服务返回的复杂json填充网格。我的json包含两个方面: 数据:包含将填充网格的记录的数组 列:具有网格配置(布局)的数组 我已经通过指定schema.data成功地用“data”填充了网格 我的问题是网格配置(布局)。我在数据源的requestEnd事件上获取列数组,并将其添加到customersource(数据源),以便在gridOptions中访问它 问题是,即使在我记录CustomerSource对象时,我看到我添加的cols数组在那里,并且填充了正确的数据,$sco

我想用从Web服务返回的复杂json填充网格。我的json包含两个方面:

  • 数据:包含将填充网格的记录的数组
  • 列:具有网格配置(布局)的数组
我已经通过指定schema.data成功地用“data”填充了网格

我的问题是网格配置(布局)。我在数据源的
requestEnd
事件上获取列数组,并将其添加到
customersource
(数据源),以便在gridOptions中访问它

问题是,即使在我记录
CustomerSource
对象时,我看到我添加的cols数组在那里,并且填充了正确的数据,
$scope.mainGridOptions.columns
未设置为
CustomerSource.cols

我认为这可能与
customersSource.cols
是异步设置的这一事实有关,但angular不应该在数据绑定时考虑这一点吗

此外,我还读到,我可能必须将某些东西设置为可观察的,但我不清楚到底该做什么

我怎样才能解决这个问题

这是我的代码:

var customersSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://....",
                dataType: "json"
            }
        },
        schema: {
            data: "data"
        },
        requestEnd: function (e) {
            this.cols = e.response.columns;
        }
    });

$scope.mainGridOptions = {
        dataSource: customersSource, // OK
        columns: customersDataSource.cols, // undefined - uses default
        height: 500,
        scrollable: true,
        selectable: true
    };
这是我的JSON

{
  "data": [
    {
      "id": 0,
      "firstname": "Dalton",
      "lastname": "Holden",
      "gender": "male",
      "email": "daltonholden@tellifly.com",
      "phone": "871-407-2973",
      "address": "22 National Drive, Brenton, Louisiana",
      "birthday": "21/04/1965",
      "currency": "GBP"
    },
    {
      "id": 1,
      "firstname": "Allyson",
      "lastname": "Odom",
      "gender": "female",
      "email": "allysonodom@tellifly.com",
      "phone": "922-548-2725",
      "address": "44 Quincy Street, Thynedale, Georgia",
      "birthday": "28/08/1961",
      "currency": "CHF"
    },
    {
      "id": 2,
      "firstname": "Sweet",
      "lastname": "Branch",
      "gender": "male",
      "email": "sweetbranch@tellifly.com",
      "phone": "880-593-2244",
      "address": "81 Fenimore Street, Veguita, Missouri",
      "birthday": "08/08/1953",
      "currency": "AUD"
    }
  ],

  "columns": [
    {
      "field": "firstname",
      "title": "Frist Name",
      "width": 200,
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "lastname",
      "title": "Last Name",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "gender",
      "title": "Gender",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "email",
      "title": "e-mail",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "phone",
      "title": "Phone Number",
      "attributes": {
        "class": "",
        "style": "text-align: right;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: right;"
      }
    },
    {
      "field": "address",
      "title": "Address",
      "attributes": {
        "class": "",
        "style": "text-align: left;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: left;"
      }
    },
    {
      "field": "birthday",
      "title": "Birthday",
      "attributes": {
        "class": "",
        "style": "text-align: center;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: center;"
      }
    },
    {
      "field": "currency",
      "title": "Currency",
      "attributes": {
        "class": "",
        "style": "text-align: center;"
      },
      "headerAttributes": {
        "class": "table-header-cell",
        "style": "text-align: center;"
      }
    }
  ]
}

编辑 我为我的测试项目创建了一个插件。如您所见,我可以填充网格,但mainGridOptions.columns有问题。任何帮助都将不胜感激!

这是因为angularjs不知道第三方所做的更改,您错过了神奇的双向数据绑定。虽然我认为承诺对你来说很有效

requestEnd: function (e) {
  $scope.$apply(function(){
    $scope.mainGridOptions.columns = e.response.columns
  })
}

你有什么错误吗?也许您可以扩展代码以获得更好的图像?当然可以。我将创建一个plunker并发回。我编辑了我的帖子!你可以在最后的链接中找到我所有的代码。