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.如何在每個對象中創建一個帶有“變體”數組的選擇框而不重復？ ng-options是否可能？ 我正在尋找這個-

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

2. 使用ng-repeat時如何將過濾器應用於每個變體數組？ 我嘗試了以下

 <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演示 。