многомерный массив в угловом

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

Мой контроллер выглядит следующим образом:

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

Угловая индексный файл просто имеет: <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

Я хотел бы предложить несколько простых вложенный для петель, так как для каждого приводит к большей сложности. Как я не уверен, что вы хотите делать с данными, давайте просто создать массив имен всех элементов и один из всех имен категории:

В вашей функции успеха:

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

EDIT:

полностью пропустил свой 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> 

EDIT 2:

Как на ваш комментарий: Если вы хотите, чтобы выбрать содержимое вторичного зрения (то есть детали) на основе выбора категории я бы предложил атрибут нг-клик. Директива может быть использована, но не обязательно:

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

Так что, когда ваши категории данные загружаются первыми нг-повтор заполняется с категориями. Каждый div с названием класса будет иметь функцию, называемую кликом, которая сделает объект selected_category равным выбранной категории. Это приведет к тому, что второе представление будет заполнено всеми элементами в выбранной категории с помощью двухстороннего связывания Angular.