Question

我有问题用Ng-Repeat显示子类别的所有元素。实际上我可以使用此代码显示所选类别中的所有事件，但我不知道如何显示特定事件的所有活动。我有这个代码......

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

   ];;
   }

Answer 1

您遇到的问题是您的内部ng-repeat位于外部，这意味着活动背景未知。要解决此问题，您只需重新考虑div布局，在另一个内部包含一个ng-repeat。例如：

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

使用AngularJS迭代多维Json（Ng-Repeat）

1 个答案: