在對象的子屬性數組上使用過濾器？

Question

我想對ng選項中使用的對象做一個奇特的過濾器。

我NG選項撥打：

<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes"></select> 

而下面是在獲得通過的對象

$scope.ssidTypes = { 
    "CPE": { 
     display: "Fixed/CPE", 
     features: { 
      CI: false, 
      SSIDVLAN: true, 
      CPEVLAN: true 
     }, 
     intfs: [5], 
     modes: ["tdma", "csma"], 
    }, 
    "Hotspot": { 
     display: "Hotspot", 
     features: { 
      CI: true, 
      SSIDVLAN: true, 
      CPEVLAN: false 
     }, 
     intfs: [2, 5], 
     modes: ['csma'] 
    }, 
    "Trunk": { 
     display: "Trunk", 
     features: { 
      CI: false, 
      SSIDVLAN: false, 
      CPEVLAN: false 
     }, 
     intfs: [5], 
     modes: ['tdma', 'csma'] 
    } 
}; 

什麼我想是篩選出基於intfs和modes選項。物體的性質。

含義時，我有：

$scope.intf = 5; 

我想的選項只能是在intf陣列中有5人。

我希望有辦法做| filter:{something something here}可以神奇地爲我做這個。

Answer 1

一個簡單的自定義過濾器應該這樣做，就像你，否則返回數組用於正常NG重複，你的情況，你應該建立一個對象，它提供的是通過

.filter('customFilter', function() { 
    return function(data, intf) { 
     var result = {}; // new empty object 
     for (var key in data) { 
      if (data[key].intfs.indexOf(intf) > -1) { // if number exists in array 
       result[key] = data[key]; // add property to object 
      } 
     } 
     return result; 
    } 
}); 

屬性（你可能會想類型檢查和驗證添加該代碼）

HTML

<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes | customFilter: currentIntf"></select> 

Plunker

Answer 2

您可以創建一個自定義過濾器來實現此目的。您可以在過濾器中創建一個 函數，該函數將處理基於您想要filer的密鑰。下面的過濾器用於對象的intfs和modes鍵。

自定義篩選：從您的控制器

app.filter('selectedTags', function() { 
    return function(ssidTypes, filerval) { 
     var tempArr = []; 
     angular.forEach(ssidTypes, function(key, val) { 
      tempArr.push(key); 
     }); 
     return tempArr.filter(function(value) { 
      //function to create filter for dynamic keys 
      function filterValue(parameter) { 
        for (var i in value[parameter]) { 
         if (filerval.indexOf(value[parameter][i]) != -1) { 
          return true; 
         } 
        } 
       } 
       //pass any key you want in your object 
       //If you want your object to be filtered based on either of the key 
      if (filterValue('intfs') || filterValue('modes')) { 
       return true; 
      } else 
       return false; 
      //If you want your object to be filtered based on both of the key 
      /*   if(filterValue('intfs') && filterValue('modes')) { 
          return true; 
         } 
         else 
          return false; */ 
     }); 
    }; 
}) 

傳遞值。您可以傳遞您想要過濾的鍵的任意組合。

控制器：

$scope.filerval=[2,"csma"]; 
    //$scope.filerval=[2,"tdma"]; 
    //$scope.filerval=[5,"tdma"]; 

HTML

<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes | selectedTags:filerval"></select> 

工作演示：https://plnkr.co/edit/YFfFHAriMQqfN25Q5Pon?p=preview