Question

我有一个下拉式过滤数组，但是我想要使用的数组稍微复杂一点，有嵌套数据，类似于http://jsfiddle.net/vojtajina/u75us/

我想结合这两个想法，但无法弄清楚为什么我的小提琴不会显示'子节点'

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

angular.js：

var app = angular.module('app04', []);

function App04Ctrl($scope) {
  //Contains the filter options
  $scope.filterOptions = {
    stores: [
      {id : 2, name : 'Show All', location: 'All Locations' },
      {id : 3, name : 'Ashburn', location: 'Ashburn' },
      {id : 4, name : 'San Francisco', location: 'San Francisco' },
      {id : 5, name : 'Denver', location: 'Denver' },
      {id : 6, name : 'Chicago', location: 'Chicago' },
      {id : 7, name : 'Irvine', location: 'Irvine' } 
    ]
  };

  //Contains the sorting options
  $scope.sortOptions = {
    stores: [
      {id : 1, name : 'Price Highest to Lowest' },      
      {id : 2, name : 'Price Lowest to Highest' },
      ]
  };

  //Mapped to the model to filter
  $scope.filterItem = {
    store: $scope.filterOptions.stores[0]
  }

  //Mapped to the model to sort
  $scope.sortItem = {
    store: $scope.sortOptions.stores[0]
  };

  //Watch the sorting model - when it changes, change the
  //ordering of the sort (descending / ascending)
  $scope.$watch('sortItem', function () {
    console.log($scope.sortItem);
    if ($scope.sortItem.store.id === 1) {
      $scope.reverse = true;
    } else {
      $scope.reverse = false;
    }
  }, true);

  //Custom filter - filter based on the location selected
  $scope.customFilter = function (locations) {
    if (locations.location === $scope.filterItem.store.location) {
      return true;
    } else if ($scope.filterItem.store.location === 'All Locations') {
      return true;
    } else {
      return false;
    }
  };  

  // Location data
  $scope.locations = [{
        name: "product1",
        price: 198,
        location: 'Ashburn',
        packages: [{
            name: 'Doom Patrol',
            services: [{
                name: 'Mento'}, {
                name: 'Vox'}, {
                name: 'Robotman'}]}, {
            name: 'Suicide Squad',
            services: [{
                name: 'King Shark'}]}, {
            name: 'Shadowpact',
            services: [{
                name: 'Zauriel'}, {
                name: 'Enchantress'}, {
                name: 'Ragman'}, {
                name: 'Nightshade'}]}]}, {
        name: "product2",
        price: 402,
        location: 'Chicago',
        packages: [{
            name: 'Metal Men'}, {
            name: 'Legion of Superheroes',
            services: [{
                name: 'Ultra Boy'}, {
                name: 'Kid Quantum'}]}]}, {
        name: "product2",
        price: 300,
        location: 'Denver',
        packages: [{
            name: 'Freedom Fighters',
            services: [{
                name: 'Damage'}, {
                name: 'Iron Munro'}]}, {
            name: 'Birds of Prey',
            services: [{
                name: 'Huntress'}, {
                name: 'Black Alice'}]}]}, {
        name: "product2",
        price: 1243,
        location: 'Irvine',
        packages: [{
            name: 'The Outsiders'}, {
            name: 'Zoo Crew',
            services: [{
                name: 'Rubberduck'}, {
                name: 'Captain Carrot'}]}, {
            name: 'The Elite',
            services: [{
                name: 'Vera Black'}, {
                name: 'Manchester Black'}]}, {
            name: 'Justice Legion Alpha'}]}
        ];

}

http://jsfiddle.net/jdacio/Vfx3y/2/

我错过了什么？我是在正确的轨道上吗？有更好的方法吗？

Answer 1

而不是location.packages，它应该是item.packages。（或＆＃39;位置＆＃39;而不是＆＃39;位置＆＃39;）。

 <li ng-repeat="item in locations | orderBy:'price':reverse | filter:customFilter">
 ...
 <li ng-repeat="package in location.packages">

您引用location，但声明item in locations。

Answer 2

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

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

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

[2]正如Mosho所提到的，你的嵌套ng-repeat指令使用的是location引用，它在父ng-repeat指令的当前上下文中不存在。最简单的解决方案是改变

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

到

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

生成的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>

你如何显示过滤阵列的重复子项？

2 个答案: