嵌套的ng-repeat不会出现angularjs

时间:2014-09-23 22:11:06

标签: javascript angularjs ng-repeat

我正在尝试使用ng-repeat列出角度项目组,然后从填充组项目的那些项目中列出。 出于某种原因,我可以让每个组重复并使用绑定{{ group.items }}打印出它的项目,但当我把它放在ng-repeat内并调用它时,什么都没有出现。

在我的指令

angular.module('concierge.customer.menuItems', ['concierge.customer.dollars'])
  .directive('menuItems', [function() {
    return {
      restrict: 'E',
      scope: {
        groups: '='
      },
      templateUrl: 'modules/menu_items/menu_items.html'
    }
  }])

我的观点

ul.menus.fat
  li(ng-repeat='group in groups' ng-class-even='alt-row')    
    .menu-group-content
      .menu-group-items(ng-show='group.items && group.items.length > 0')
        {{ group.items }} // This line prints the items correctly
        li(ng-repeat='item in group.items')
          {{ item }} // This line Doesn't produce anything

JSON中的示例group

{  
   "items":[  
      {  
         "description":"crispy ling cod, cabbage, salsa fresca, chipotle mayo ",
         "group_id":7,
         "id":25,
         "name":"Fish Taco"
      },
      {  
         "description":"pork al pastor, cheddar, monteray jack, crema ",
         "group_id":7,
         "id":26,
         "name":"Pork Gringa"
      },
      {  
         "description":"avocado, radish, green onion, cilantro, black chile oil ",
         "group_id":7,
         "id":27,
         "name":"Chicken Karaage Taco"
      },
      {  
         "description":"salsa, fresca, crema & queso fresco",
         "group_id":7,
         "id":28,
         "name":"Blackbean Taco"
      }
   ],
   "merchant_id":3,
   "type":"individual",
   "id":7,
   "name":"Single Tacos"
}

为什么不填充第二个ng-repeat?

1 个答案:

答案 0 :(得分:0)

几乎两个小时后解决了这个问题,结果证明我的DOM结构存在问题,因为我的ul之间没有任何li元素,它已经破坏了。

不显示{{ item }}

ul.menus.fat
  li(ng-repeat='group in groups' ng-class-even='alt-row')    
    li(ng-repeat='item in group.items')
      {{ item }} // This line Doesn't produce anything
显示

{{ item }}

ul.menus.fat
  li(ng-repeat='group in groups' ng-class-even='alt-row')  

    ul  // This ul was key
      li(ng-repeat='item in group.items')
        {{ item }} // This line Doesn't produce anything