Angularjs 如何显示筛选数组的ng重复子级？

我有一个下拉过滤数组，但我想使用的数组有点复杂，有嵌套的数据，类似于此

我想将这两种想法结合起来，但不明白为什么我的小提琴没有显示“子节点”

<div class="col-md-12" ng-controller="App04Ctrl">
    <p>Search:
      Filter:
      <select ng-model="filterItem.store" ng-options="item.name for item in filterOptions.stores">
      </select>
      Sort:
      <select ng-model="sortItem.store" ng-options="item.name for item in sortOptions.stores">
      </select>
    </p>
    <ul>
      <li ng-repeat="item in locations | orderBy:'price':reverse | filter:customFilter" >Name: {{item.name}} Price: {{item.price}} Location: {{item.location}}</li>
        <ul>
          <li ng-repeat="package in location.packages">{{package.name}} has services:
            <ul>
              <li ng-repeat="service in package.services">{{service.name}}</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

---

我错过了什么？我走对了吗？有更好的方法吗？

而不是

location.packages

，它应该是

item.packages

。（或“位置中的位置”而不是“位置中的项目”）

...

---

您引用了

位置

，但您在位置中声明了

项
我在上面的代码中看到了两个问题：

[1] 请注意，您已经关闭了
标记，从而停止了ng repeat指令的嵌套，以显示每个项目位置的包和服务。只需删除
结束标记，就可以解决第一个问题

<li ng-repeat="item in locations | orderBy:'price':reverse | filter:customFilter" >
Name: {{item.name}} 
Price: {{item.price}} 
Location: {{item.location}}
</li> <!-- THIS IS THE PROBLEM!! -->

到




生成的HTML代码应为：

<ul>
  <li ng-repeat="item in locations | orderBy:'price':reverse | filter:customFilter" >
    Name: {{item.name}} 
    Price: {{item.price}} 
    Location: {{item.location}}
    <ul>
      <li ng-repeat="package in location.packages">{{package.name}} has services:
        <ul>
          <li ng-repeat="service in package.services">{{service.name}}</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>



名称：{{item.Name}
价格：{{item.Price}}
位置：{{item.Location}

{{package.name}具有以下服务：

{{service.name}






<li ng-repeat="item in locations | orderBy:'price':reverse | filter:customFilter" >
Name: {{item.name}} 
Price: {{item.price}} 
Location: {{item.location}}
</li> <!-- THIS IS THE PROBLEM!! -->

<li ng-repeat="package in location.packages">

<li ng-repeat="package in item.packages">

<ul>
  <li ng-repeat="item in locations | orderBy:'price':reverse | filter:customFilter" >
    Name: {{item.name}} 
    Price: {{item.price}} 
    Location: {{item.location}}
    <ul>
      <li ng-repeat="package in location.packages">{{package.name}} has services:
        <ul>
          <li ng-repeat="service in package.services">{{service.name}}</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>