级联选择AngularJS过滤器第二次不显示数据答案

【问题标题】：Cascading selects AngularJS filter not display data in second time级联选择AngularJS过滤器第二次不显示数据
【发布时间】：2023-03-24 12:19:01
【问题描述】：

考虑下面的代码：

<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
  </head>
  <body ng-controller="appCtrl">
    <div class="filters">
      <div>
        Color: <select id="color" ng-model="colorfilter" ng-options="car.color as car.color for car in cars | unique:'color'" ng-change="changeColor()">
        </select>
        Model: <select id="model" ng-disabled="!colorfilter" ng-model="modelfilter" ng-options="car.model as car.model for car in cars | filter:{color:colorfilter} | unique:'model'" ng-change="changeModel()">
        </select>
      </div>
    </div>
    <div class="list">
      <p class="car" ng-repeat="car in cars | filter:colorfilter | filter:modelfilter">{{car.make}} :: {{car.model}} | {{car.color}}</p>
    </div>
  </body>
</html>

还有controller.js：

angular.module('app', [])
.filter('unique', function() {
  return function(input, key) {
    var unique = {};
    var uniqueList = [];
    for(var i = 0; i < input.length; i++){
        if(typeof unique[input[i][key]] == "undefined"){
            unique[input[i][key]] = "";
            uniqueList.push(input[i]);
        }
    }
    return uniqueList;
  };
})
.controller('appCtrl', function($scope) {
// define list of cars
  $scope.cars = [
    {make:"Dodge", color:"Blue", model:"Dakota"},
    {make:"Chevy", color:"Black", model:"Aveo"},
    {make:"Honda", color:"Black", model:"Accord"},
    {make:"Toyota", color:"Red", model:"Corolla"}
    //... other lines
  ];

  // initialize filter object
  $scope.filter = {};

});

汽车列表完整显示在选择字段下方。当我第一次过滤时，第一个选择通常会过滤汽车列表（考虑到所选颜色）和第二个选择数据（仅具有所选颜色的模型）。并且第二个选择还根据所选型号过滤汽车列表。听起来很完美！

但是，当我尝试执行新过滤器时，当我选择另一种颜色时，它不会在汽车列表中显示任何记录，但通常通过过滤第二次选择的数据来工作。通过选择第二个选择中可用的模型之一，将显示列表，这正是两个选择的组合（例如选择的 AND）。

似乎第一次选择只考虑当前正在屏幕上查看的列表数据，需要等待第二次选择显示结果。但我的意图是向每个过滤器显示结果，始终搜索完整的项目列表。

我在Codepen上的完整代码。

【问题讨论】：

标签： javascript html angularjs angularjs-filter

【解决方案1】：

更新：

您需要为modelFilter 设置null 值以重置过滤器。

您的代码工作正常，但是当您在第二个下拉列表中选择一个值时，您将值设置为modelfilter，这会导致问题。

尝试在两个下拉菜单中插入一个空的下拉选项，这样当您选择第一个下拉菜单时，它将重置为默认状态，modelFilter 将不适用。

工作演示：

CodePen

【讨论】：

我看过你的 Codepen，但问题似乎仍然存在。当我第二次选择时，第一个选择字段没有显示记录。
@Atoyansk。这样想。当您第二次进行选择时，第二个下拉菜单将重置为默认状态。尝试更改第二个下拉菜单中的选项以获得正确的值。在我检查了这个情况后，我已经发布了解决方案！
也许我不明白...我想这样做：我在第一次选择中选择“蓝色”，结果只显示蓝色汽车。我在第二次选择中选择“Dakota”，结果只显示蓝色 dakota（2 项）。所以，我重新开始，在第一次选择中选择“红色”。这应该显示下面的所有红色汽车，但它没有显示任何结果。这就是问题...
@Atoyansk 查看更新后的codepen。
这就是我所需要的！实现它的另一种方法。谢谢

【解决方案2】：

我认为这可能是您正在寻找的。根据您禁用 ng 的逻辑，我认为您希望用户始终按照选择颜色然后选择模型的顺序进行。

https://codepen.io/Cameron64/pen/YZbrqW?editors=1010

为了保持这个顺序，我将颜色下拉菜单设置为在选择模型下拉菜单时重置。此外，我将过滤器分组到一个对象中，以便在传递给转发器时不会那么冗长

$scope.changeColor = function() {
  $scope.filter.model = undefined;
  $scope.filter.color = $scope.filter.color || undefined;
}

【讨论】：

这正是我想要做的！谢谢