iterating a multidimensional Json with AngularJS(Ng-Repeat)

Question

I have problem to show all elements of subcategory with Ng-Repeat. Actually i can show all events from selected category with this code, but i don't know how to show all activities from specific event. i have this code....

HTML

<div class = "categorias_eventos">
           <ul>
              <li value = "0" class = "active">
                 <img src="images1"  ng-click="categorySelected = {categoryName: '1'}">
              </li>
              <li value = "1" class = "active">
                 <img src="images2" ng-click="categorySelected = {categoryName: '2'}">
              </li>
              <li value = "2">
                 <img src="images3" ng-click="categorySelected = {categoryName: '3'}">
              </li>
              <li value = "3" >
                 <img src="images4" ng-click="categorySelected = {categoryName: '4'}">
              </li>
              <li value = "4">
                 <img src="images5" ng-click="categorySelected = {categoryName: '5'}">
              </li>
           </ul>               
        </div>
<div ng-controller="Test">                     
   <div ng-repeat="evento in eventos | filter:categorySelected" ng-click = "eventSelected = {id: '{{evento.id}}'}">
      <div class="infoEvento">
         <div class="name_event">
            {{evento.eventName}}
         </div>            
      </div>                           
   </div>                     
</div>

<!-- Activitys -->
<div ng-controller="Test">                     
   <div ng-repeat="activity in evento.activitys | filter:eventSelected">
      <div class="infoEvento">
         <div class="name_event">
            {{activitys.description}}
         </div>            
      </div>                           
   </div>                     
</div>

JAVASCRIPT

function Test($scope) {
  $scope.eventos = [

   {  
      "id":"1",
      "dateStart":"01-12-2014",
      "dateEnd":"12-12-2014",
      "eventName":"partyDeluxe",
      "categoryName":"Category 1",
      "activitys":
        [
           {
               "pic_id":"1500",
               "description":"Picture of a computer",
               "localion":"img.cloudimages.us/2012/06/02/computer.jpg",
               "type":"jpg"            
           },
           {
               "pic_id":"100",
               "description":"Picture of a computer",
               "localion":"img.cloudimages.us/2012/06/02/computer.jpg",
               "type":"jpg"            
           },
           {
               "pic_id":"15",
               "description":"Picture of a computer",
               "localion":"img.cloudimages.us/2012/06/02/computer.jpg",
               "type":"jpg"            
           }
         ]  
   },

   ];;
   }

Matt Way · Accepted Answer · 2014-08-21 00:12:01Z

1

The problem you have is that your inner ng-repeat is sitting outside your outer, which means the activity context is unknown. To fix this, you simply need to rethink your div layout to include one ng-repeat inside the other. For example:

<div ng-controller="Test">                     
   <div ng-repeat="evento in eventos | filter:categorySelected">
       <div ng-click = "eventSelected = {id: '{{evento.id}}'}">
           <div class="infoEvento">
               <div class="name_event">
                   {{evento.eventName}}
               </div> 
           </div>           
       </div>   

       <!-- Activitys -->
       <div ng-controller="Test">                     
           <div ng-repeat="activity in evento.activitys | filter:eventSelected">
               <div class="infoEvento">
                   <div class="name_event">
                       {{activitys.description}}
                   </div>            
               </div>                            
           </div>                     
       </div>            
    </div>                     
</div>

answered Aug 21, 2014 at 0:12

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3285408 Over a year ago

thank you very much, but if you wanted to print the iteration activitys in another div in the same hierarchy. Is it possible?

Matt Way Over a year ago

What do you mean in the same hierarchy? Please ask the question you truly want answered.

Collectives™ on Stack Overflow

iterating a multidimensional Json with AngularJS(Ng-Repeat)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related