AngularJS 双重嵌套 ng-repeat 不起作用

Question

我试图调用双重嵌套的 ng-repeat 来循环对象中的对象，但它不起作用。有人能指出我的问题吗？我们将不胜感激。

HTML:

<li ng-repeat="diningHall in diningHalls | orderBy:menuSort">
  {{diningHall.id}}
  <li ng-repeat="item in diningHall.menu">
  {{item.name}}
  </li>
</li>

Javascript

$scope.diningHalls = [
        { 'id': 'PlaceA' ,
            'menu': [
          {'name':'Dungeness crab fritters with scallions, chervil, and celery root julienne'},
          {'name':'Grilled Llano Seco Ranch pork loin with roasted artichokes'},
          {'name':'Zuppa di frutta with clementine sherbet'},
          {'name':'Dill, radishes, and curly endive'},
          {'name':'Panna cotta with blood orange gelatin'}
                ]

        },
        { 'id': 'PlaceB',
            'menu': [
           {'name':'Bacon'},
           {'name':'More Bacon'},
           {'name':'Still Bacon'},
           {'name':'Delicious Bacon'},
           {'name':'Best Bacon'}
                ]
        }
  ];

Answer 1

我认为问题不在于 Angular，而在于 HTML 格式缺少一些 <ul>列表中的元素。在您的 HTML 中尝试一下:

<ul>
    <li ng-repeat="d in diningHalls | orderBy:menuSort">
       {{d.id}}
       <ul>
         <li ng-repeat="item in d.menu">
            {{item.name}}
         </li>
       </ul>
    </li>
</ul>

这是一个JSFiddle Demo