1

我正在使用的应用程序具有不同级别的数据。使用 AngularJS ng-repeat 我可以指向不同级别的数据，还可以遍历每个数据并绑定到视图。就像这个链接（这里我使用了Kendo Mobile UI和AngularJS）。

根据 Telerik 文档，“ng-repeat”不应该被用作 CSS 样式，而使用 Kendo 小部件需要折腾，并且更新它会带来问题的模型。为了防止这个Kendo DataSource应该用于从JSON 字符串或文件中获取数据

我在上面的链接中使用Kendo DataSource尝试了相同的应用程序，但我只能从 JSON 字符串中获取第一级数据。对于第二级和第三级，如果我指定数组位置，我只会在视图上获得该数据，类似于此链接(With Kendo DataSource and AngularJS)。

所以我的问题是，如何处理这种多层次的 JSON 数据

 [
    {
        "continentName": "Asia",
        "countries": [
            {
                "countryName": "India",
                "states": [
                  {
                    "stateName": "Sikkim"
                  },
                  {
                    "stateName": "Karnataka"
                  },
                  {
                    "stateName": "Kerla"
                  },
                ],
            },
            {
                "countryName": "China",
                "states": [
                  {
                    "stateName": "Jiangsu Province"
                  },
                  {
                    "stateName": "Heilongjiang Province"
                  },
                  {
                    "stateName": "Fujian Province"
                  },
                ],
            },
          ],
    },
        {
        "continentName": "Europe",
        "countries": [
            {
                "countryName": "Germany",
                "states": [
                  {
                    "stateName": "Berlin"
                  },
                  {
                    "stateName": "Hesse"
                  },
                  {
                    "stateName": "Rhineland-Palatinate"
                  },
                ],
            },
            {
                "countryName": "Denmark",
                "states": [
                  {
                    "stateName": "Hovedstaden"
                  },
                  {
                    "stateName": "Midtjylland"
                  },
                  {
                    "stateName": "Nordjylland"
                  },
                ],
            },
          ],
    },       

]

使用 Kendo DataSource 获取数据

angular.module("app", ["kendo.directives"]).controller("MyCtrl", function ($scope) {
$scope.source = new kendo.data.DataSource({
    data: json,
    pageSize: 10
});
});

在 html 文件的视图部分

<div ng-app="app" ng-controller="MyCtrl">
        <div kendo-list-view k-data-source="source">
            <div k-template>

                <ul class="ulClass">
                    <h3>{{dataItem.continentName}}</h3>
                    <li>
                        {{dataItem.countries[0].countryName}}
                        <ul>
                            <li>{{dataItem.countries[0].states[0].stateName}}</li>
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
    </div>

那么问题是如何处理多级 JSON 数据并使用 Kendo DataSource 绑定到视图或模板？

4

0 回答 0