0

私は Angularjs を使用しており、json ファイルからデータを入力しています。ng-repeat を使用してデータを表示しています。カテゴリ、サブカテゴリ、および製品があります。一部のカテゴリにはサブカテゴリがあり、一部のカテゴリにはいくつかの製品がありました。カテゴリにサブカテゴリが表示されている場合、製品が表示されている場合は製品を表示するなどの条件を記述しようとしています。

[{
    "category":"Cables",
    "subCategories":[
        {
            "subCategory":"Sub Category 1"

        },
        {
            "subCategory":"Sub Category 2"
        }
    ]
},
{
    "category":"Wallplates & Boxes",
    "subCategories":[
        {
            "subCategory":"Sub Category 6"
        },
        {
            "subCategory":"Sub Category 7"
        }
    ]
},
{
    "category":"Media Distribution",
    "products":[
        {
            "proTitle":"Product 1"
        },
        {
            "proTitle":"Product 2"
        }
    ]
}]

コントローラーは以下。

var app = angular.module('analytics', []);
app.controller ('categoryCtrl', function ($scope, $http){
$http.get('json/category_data_new.json').success(function(data) {
    $scope.chartValues = data;
});

});

以下のコードを使用して、カテゴリとサブカテゴリの下を表示しています

<ul class="nav">
    <li ng-repeat="chartValue in chartValues">
        <span ng-click="loadRecord(chartValue, $index)">
           {{chartValue.category}}
        </span>
        <ul ng-show="chartValue.subCatList">
            <li ng-repeat="item in chartValues[$index].subCategories">
                  <span ng-click="loadSubRecord(item, $index)">
                      {{item.subCategory}}
                   </span>
            </li>
        </ul>
    </li>
</ul>

誰かがこれをどのように行うか考えているなら? 提案してください。

4

1 に答える 1

0

こちらのリンクをチェック

サブメニュー用に 2 つのテンプレートが作成されました

  <ul ng-show="chartValue.subCategories">
        <li ng-repeat="item in chartValues[$index].subCategories">
              <span ng-click="loadSubRecord(item, $index)">
                  {{item.subCategory}}
               </span>
        </li>
    </ul>
     <ul ng-show="chartValue.products">
        <li ng-repeat="item in chartValues[$index].products">
              <span ng-click="loadSubRecord(item, $index)">
                  {{item.proTitle}}
               </span>
        </li>
    </ul>
于 2013-10-21T13:04:25.677 に答える