AngularJS-我应该如何处理多个动态下拉列表来过滤列表

AngularJS - How should I handle multiple dynamic dropdowns to filter a list?

本文关键字：动态 下拉列表 列表 过滤 我应该 何处理 处理 AngularJS-      更新时间：2023-09-26

我对AngularJS很陌生（对Javascript也有点陌生），所以我不确定我是否以正确的方式看待这个问题。

我从亚马逊的产品广告API获取数据。我试图解释一个项目的不同变体，并允许用户通过"变体尺寸"的下拉菜单选择他们喜欢的变体，这基本上只是变体不同的方式（大小、颜色等）

我事先不知道这些维度是什么，所以在我从服务器获得的JSON数据中，我有一个所有可能项目的数组（这些维度的所有有效组合的数组）、一个维度名称数组和一个维度值数组。示例：

possible_items = [{'size': 5, 'color': 'red'}, {'size': 5, 'color': 'blue'}];
variation_dimensions = ['size', 'color'];
variation_values['size'] = [5];
variation_values['color'] = ['red', 'blue'];

目前我正在做这个：

<div class="detailsSelect" ng-repeat="dim in variation_dimensions">
  <select class="form-control variation-dropdown">
    <option ng-repeat="value in item.variation_values[dim]">{{ value }}</option>
  </select>
</div>

这将创建具有正确值的正确选择数。

我如何使用Angular来跟踪创建了哪些选择，并使用它们的值来筛选可能的项目列表？

首先，在select中，您可以使用ng-options而不是ng-repeat:

<select class="form-control variation-dropdown" 
        ng-options="value for value in item.variation_values[dim]"></select>

然后你需要添加ng模型来存储所选内容，并添加ng更改来将所选内容应用于你的过滤器：

<select class="form-control variation-dropdown" 
        ng-options="value for value in item.variation_values[dim]" 
        ng-model="selection[dim]" 
        ng-change="updateFilters()"></select>

在您的控制器中：

$scope.selection = {};  // At the top, just to initialise $scope.selection as a key/value store
$scope.filteredItems= possible_items; // Initially just display everything
$scope.updateFilters = function() {
  for (var dim in $scope.selection) {
    $scope.filteredItems= $scope.filteredItems.filter(function(item) {
      return item[dim]==$scope.selection[dim];
    });
  }
}

然后，您只需要在html中添加另一个部分来显示filteredItems的内容。

相关文章：