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

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> 

//编辑 使用。一些（见下面的回答）或休息后循环修复该问题。

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到exevalue。

您正在使用的角度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;