Question

我正在尝试使用谓词函数来过滤某些项目，因为对于直接模板过滤，对象结构可能有点太深。我有一系列项目，我要根据用户选择的区域和用户选择的国家进行过滤。当我使用所选区域过滤模板中的项目时，将呈现正确的项目。但是，我需要更深入地过滤，即用户选择所选区域的国家。谓词函数似乎正在正确过滤项目，即打印到控制台，但项目未在模板中呈现。

  {
    "id": 2,
    "name": "my test app",
    "version": "1.0.0",
    "regions": [
      {
        "id": 11,
        "name": "LATIN_AMERICA",
        "timeZone": "UTC+8",
        "selected": true,
        "countries": [
          {
            "id": 47,
            "name": "Brazil",
            "timeZone": "UTC+08:00",
            "isoCode": "BR",
            "selected": false
          },
          {
            "id": 46,
            "name": "Argentina",
            "timeZone": "UTC+08:00",
            "isoCode": "AR",
            "selected": true
          }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "my test app",
    "version": "1.0.1",
    "regions": [
      {
        "id": 11,
        "name": "LATIN_AMERICA",
        "timeZone": "UTC+8",
        "selected": true,
        "countries": [
          {
            "id": 47,
            "name": "Brazil",
            "timeZone": "UTC+08:00",
            "isoCode": "BR",
            "selected": true
          },
          {
            "id": 46,
            "name": "Argentina",
            "timeZone": "UTC+08:00",
            "isoCode": "AR",
            "selected": false
          }
        ]
      }
    ]
  }

function filterByRegionCountry(app) {
    if(vm.selectedCountry !== undefined) {
        angular.forEach(app.regions, function(appRegion, i) {
            angular.forEach(appRegion.countries, function(appCountry, j) {
                angular.forEach(vm.selectedCountry, function(selectedCountry, k) {
                    if((appCountry.name == selectedCountry.name) && appCountry.selected) {
                        console.log(app);
                        return true;
                    }
                });
            });
        });
    }
}

<select class="form-control" ng-model="vm.selectedRegion" ng-options="region.name for region in vm.filterRegions">
    <option value="">--select region--</option>
</select>

<select class="form-control" ng-model="vm.selectedCountry" ng-options="country.name for country in vm.selectedRegion.countries" multiple>
    <option value="">-- select country --</option>
</select>

<tr ng-repeat="app in vm.appVersions | filter:vm.filterByRegionCountry">
    <td>
        <label>{{ app.name }}</label>
    </td>
    <td>
        <label>{{ app.version }}</label>
    </td>
</tr>

//编辑使用.some（参见下面的答案）或中断循环可以解决问题。

    if(vm.selectedCountry !== undefined) {
        for(var i = 0; i < app.regions.length; i++) {
            for(var j = 0; j < app.regions[i].countries.length; j++) {
                for(var k = 0; k < vm.selectedCountry.length; k++) {
                    if((app.regions[i].countries[j].name == vm.selectedCountry[k].name) && app.regions[i].countries[j].selected) {
                        console.log(app);
                        return true;
                        break;
                    }
                }
            }
        }
    }

Answer 1

Filter 需要true或false来执行。

你正在使用棱角分明的forEach而 forEach 没有休息

尝试使用javascript .some

像这样

if (vm.selectedCountry) {
    return app.regions.some(function (appRegion) {
        return appRegion.countries.some(function (appCountry) {
            return vm.selectedCountry.some(function (selectedCountry) {
                if ((appCountry.name == selectedCountry.name) && appCountry.selected) {
                    console.log(app);
                    return true;
                }
            });
        });
    });

} 
else 
  return false;

角度谓词过滤器不返回元素

1 个答案: