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-options？我正在寻找 -

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

使用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 demo

AngularJs - 如何在ng-repeat中的每次迭代中过滤嵌套数组对象？

1 个答案: