Question

我对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跟踪创建的选项并使用其值来过滤可能的项目列表？

Answer 1

首先，在选择中，您可以使用ng-options代替ng-repeat：

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

然后您需要添加ng-model来存储已选择的内容，并添加ng-change以将选择应用于过滤器：

<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的内容。

AngularJS - 如何处理多个动态下拉列表以过滤列表？

1 个答案: