Cascading selects AngularJS filter 第二次不显示数据

Question

考虑以下代码：

<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 = {};

});

汽车列表完整显示在 select 字段下方。当我第一次过滤时，第一个 select 通常会过滤汽车列表（考虑 selected 颜色）和第二个 select 数据（仅具有 select编辑颜色）。第二个 select 还过滤了考虑 selected 模型的汽车列表。听起来很完美！

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

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

我在 Codepen 上的完整代码。

Answer 1

更新：

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

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

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

工作演示：

CodePen

Answer 2

我想这可能就是您要找的。根据您的 ng-disabled 逻辑，我认为您希望用户始终按照选择颜色然后选择型号的顺序进行操作。

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

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

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

Cascading selects AngularJS filter 第二次不显示数据

Cascading selects AngularJS filter not display data in second time

javascript

html

angularjs

angularjs-filter

更新：

工作演示：