角度謂詞過濾器不返回元素

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;