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

});

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

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

似乎只有当前正在屏幕上查看的列表数据被考虑用于第一次选择，需要等待第二次选择才能显示结果。但我打算将结果显示给每个过滤器，始终搜索完整的项目列表。

我在Codepen上的完整代码。

Answer 1

更新

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

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

尝试在两个下拉列表中插入一个空的下拉选项，这样当您选择第一个下拉菜单时，它将重置为默认状态，并且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;
}

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

2 个答案:

更新

工作演示：