AngularJs - 如何在ng-repeat中的每次迭代中通過嵌套數組對象進行篩選？

Question

我在我的控制器中有以下對象。

function MyCntrl($scope) { 
    $scope.colors = [ 
    {name:'black', shade:'dark',variant:['metal','pure','knight']}, 
    {name:'white', shade:'light',variant:['pure','knight']}, 
    {name:'red', shade:'dark',variant:['metal','pure']}, 
    {name:'blue', shade:'dark',variant:['metal','knight']}, 
    {name:'yellow', shade:'light',variant:['chrome','silver','knight']} 
    ]; 
} 

有兩個問題。

1.如何在每個對象中創建一個不帶重複的'variant'數組的選擇框？這可能與ng選項？我在找這個 -

<select ng-model="selectedVariant"> 
    <option>Metal</option> 
    <option>Pure</option> 
    <option>Knight</option> 
    <option>Chrome</option> 
    <option>Solver</option> 
    </select> 

如何使用時，我可以將過濾器應用於每個變量數組NG-重複？我嘗試以下

<div ng-controller="MyCntrl"> 
 
     <select ng-model="selectedVariant" ng-options="variant for variant in (c.variant for c in colors)"></select><br> 
 
     <ul> 
 
     <li ng-repeat="c in colors | filter:{c.variant:selectedVariant}">{{c.name}}</li> 
 
     </ul> 
 
</div>

Answer 1

對於第一個問題，你可以寫一個只返回所有variants的唯一值合併在一起或計算該值只有一次特定的功能（如列表的顏色似乎是靜態的）。你可以很容易地從一個轉換到另一個。例如：

$scope.allVariants = function(colors) { 
    return colors.reduce(function(variants, color) { 
     color.variant.forEach(function(variant) { 
     if (variants.indexOf(variant) === -1) { 
      variants.push(variant); 
     } 
     }); 
     return variants; 
    }, []); 
    }($scope.colors); 

對於第二，我會去自定義過濾器功能。這是很簡單的：

$scope.hasSelectedVariant = function(color) { 
    return color.variant.indexOf($scope.selectedVariant) !== -1; 
}; 

現在這是怎麼了那些可以在模板中使用：

<div> 
    <select ng-model="selectedVariant" ng-options="variant for variant in allVariants"></select><br> 
    <ul> 
    <li ng-repeat="c in colors | filter:hasSelectedVariant">{{c.name}}</li> 
    </ul> 
</div> 

Plunkr demo。