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

AngularJS双嵌套ng-repeat不起作用

1 个答案: