【问题标题】:Angularjs if else condition using json array [duplicate]Angularjs if else条件使用json数组[重复]
【发布时间】:2013-10-21 12:50:24
【问题描述】:

我正在使用 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>  

如果有人知道如何做到这一点?请建议。

【问题讨论】:

    标签: javascript json angularjs


    【解决方案1】:

    Check this link here

    为子菜单创建了两个模板

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

    【讨论】:

    • 感谢您的解决方案..太棒了..
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-09
    • 1970-01-01
    • 2015-04-29
    相关资源
    最近更新 更多