简体   繁体   English

使用AngularJS(Ng-Repeat)迭代多维Json

[英]iterating a multidimensional Json with AngularJS(Ng-Repeat)

I have problem to show all elements of subcategory with Ng-Repeat. 我很难用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 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 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"            
           }
         ]  
   },

   ];;
   }

The problem you have is that your inner ng-repeat is sitting outside your outer, which means the activity context is unknown. 您遇到的问题是内部的ng-repeat位于外部的外部,这意味着活动上下文未知。 To fix this, you simply need to rethink your div layout to include one ng-repeat inside the other. 要解决此问题,您只需要重新考虑div布局即可在另一个ng-repeat包含另一个。 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM