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