angularjs - Kendo Mobile UI DataSource を使用して ng-repeat 機能を取得する方法

Question

私が作業しているアプリケーションには、さまざまなレベルのデータがあります。AngularJS ng-repeat を使用すると、さまざまなレベルのデータを参照でき、各データを反復処理してビューにバインドすることもできます。それはこのリンクのようなものです(ここではKendo Mobile UIとAngularJSを使用しています)。

Telerik のドキュメントによると、"ng-repeat"は CSS スタイルとして使用すべきではありませんが、Kendo ウィジェットを使用すると問題が発生し、モデルを更新することもできます。これを防ぐには、Kendo DataSourceを使用してJSON 文字列またはファイルからデータをフェッチする必要があります。

Kendo DataSourceを使用して上記のリンクで同じアプリを試しましたが、JSON 文字列から第 1 レベルのデータしか取得できませんでした。2 番目と 3 番目のレベルでは、配列の位置を指定すると、このリンク(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 を使用してビューまたはテンプレートにバインドする方法ですか?