javascript - Angular 多维数组

Question

我有一个来自 API 的多维数组。是否可以以编程方式循环遍历数组？

{
    success: true,
    categories: [{
            cat_id: "2",
            name: "This is category One",
            description: null,
            photo_url: "/img/test.png",
            order: "1",
            items: [{
                    item_id: "1",
                    title: "Desk",
                    item_url: "/690928460",
                    photo_url: "/desk.png",
                }, {
                    item_id: "2",
                    title: "Chair",
                    item_url: "/18882823",
                    photo_url: "/chair.png",
                },
            }]
    }]
}

我的 Controller 如下所示:

myApp.controller('items', function($scope, $http, $location, Data) {
    var apiUrl = '/api/items';
    $http.get(apiUrl).
    success(function(data) {
        $scope.data = Data;
        $scope.allData = data;
    });
    $scope.changeView = function(view) {
        $location.path(view);
    }
});

Angular 索引文件只有:<div ng-view=""></div>

查看文件

<div class="scrollable categories-container animated-fast slideInUp">
    <div class="container categories">
        <div class="row" ng-repeat="categories in allData">
            <div class="col-xs-6" ng-repeat="category in categories">
                <div class="items">
                    <div class="title">
                        {{ category.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我可以很好地循环遍历类别名称，但是当尝试返回每个类别的项目时，我不明白其背后的逻辑...

Answer 1

我建议使用一些简单的嵌套 for 循环，因为每个循环都会产生更多的复杂性。 由于我不确定您想对数据做什么，让我们创建一个包含所有项目名称和所有类别名称之一的数组:

在您的成功功能中:

var items = [], categories = []
for(var i = 0; i < data.categories.length;i++){
    categories.push(data.categories[i].name);
    for(var j = 0; j < data.categories[i].items.length;j++){
        items.push(data.categories[i].items[j].name);
    }
}
console.log(categories);
console.log(items);

编辑:

完全错过了你的html代码，这是我的解决方案:

<div class="scrollable categories-container animated-fast slideInUp">
    <div class="container categories">
        <div class="col-xs-6" ng-repeat="category in allData.categories">
            <div class="items">
                <div class="title">
                    {{ category.name }}
                </div>
            </div>
        </div>
    </div>
</div>

编辑2:

关于您的评论: 如果您想根据类别的选择来选择辅助 View 的内容(即项目)，我建议使用 ng-click 属性。可以使用指令，但不是必需的:

<div class="scrollable categories-container animated-fast slideInUp">
    <div class="container categories">
        <div class="col-xs-6" ng-repeat="category in allData.categories">
            <div class="title" ng_click="selected_category = category">
                {{ category.name }}
            </div>
        </div>

        <div class="col-xs-6" ng-repeat="item in selected_category.items">
            <div class="title">
                {{ item.name }}
            </div>
        </div>
    </div>
</div>

因此，当加载类别数据时，第一个 ng-repeat 会填充类别。每个具有类标题的 div 都会有一个在单击时调用的函数，该函数将使 selected_category 对象等于所选类别。 然后，这将导致第二个 View 通过 Angular 的双向绑定(bind)填充所选类别中的所有项目。