2017-07-28 19 views
0

私は、ng-optionsで使用されているオブジェクトに対してファンシーフィルタを実行しようとしています。オブジェクトのサブプロパティ配列でフィルタを使用していますか?

マイ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'] 
    } 
}; 

私は何をしようとしていることintfsmodesに基づいてオプションをフィルタリングです。オブジェクトのプロパティ。私が持っている

意味:

$scope.intf = 5; 

私はintf配列に5を持っているものであることをオプションをしたいと思います。

| filter:{something something here}私にはこれを魔法のように行う方法がいくつかあります。

+0

あなたはこれを達成するためにカスタムフィルタを記述する必要があります – Vivz

答えて

0

単純なカスタムフィルタは、(あなたのケースでは、オブジェクトを構築し、それを

.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; 
    } 
}); 

を渡すプロパティを提供する必要があり、あなたはそれ以外の場合は、通常のNGリピートのための配列を返すのと同じように、それを行う必要がありますあなたはおそらくHTML

)このコードに型チェックと検証を追加することになるでしょう

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

Plunker

0

これを実現するカスタムフィルタを作成することができます。フィラーに基づいてキーを処理するフィルタに 関数を作成できます。フィルタの下には、オブジェクトのintfsmodesのキーがあります。

カスタムフィルタ:あなたのコントローラから

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

関連する問題