在角多维数组 [英] multidimensional array in angular

问题描述

我有一个从API多维数组。是否有可能通过数组编程循环？

I have a multidimensional array from an API. Is it possible to programatically loop through the array?

{
    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",
                },
            }]
    }]
}

我的控制器看起来是这样的：

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);
    }
});

角索引文件只是有：＆LT; D​​IV NG-视图=＆GT;＆LT; / DIV＆GT;

Angular index file just has: <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>

我可以通过类别名称循环正常，但试图返回项目对于每个类别时，我不明白它背后的逻辑...

I can loop through the category names fine, but when trying to return items for EACH category I don't understand the logic behind it...

推荐答案

我会建议一些简单的嵌套for循环，为每个产生了更多的复杂性。
由于我不知道你想要什么用数据做就让我们创建所有项目名称的数组和所有类别名称之一：

I would suggest some simple nested for loops, as for each gives rise to more complexity. As I'm not sure what you want to do with the data let's just create an array of all item names and one of all category names:

在你的成功的功能：

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 code不知何故，这里是我的解决方案：

Completely missed your html code somehow, here is my solution:

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

至于您的评论：
如果你想基于一个类我建议一个NG-点击属性的选择，选择二级视图的内容（即项目）。一项指令，可以使用，但不是必需的：

As to your comment: If you want to select the secondary view's contents(ie the items) based on the selection of a category I would suggest a ng-click attribute. A directive could be used but isn't necessary:

<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重复填充了的类别。与级冠军每个div将有一个叫上点击功能，这将使selected_category对象等于选择的类别。
那么这将导致第二个观点与由角的双向绑定所选类别的所有项目进行填充。

So when your categories data is loaded the first ng-repeat is populated with the categories. Each div with class title will have a function called on click which will make the selected_category object equal the selected category. This will then cause the second view to be populated with all the items in the selected category by Angular's two way bind.

这篇关于在角多维数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！