考虑下面的代码:
<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)。
第一次select似乎只考虑当前屏幕上正在查看的列表数据，需要等待第二次select才能显示结果。但我的目的是向每个过滤器显示结果，始终搜索完整的项目列表。
我的完整代码 Codepen .
最佳答案
我想这可能就是您正在寻找的。根据您的 ng-disabled 逻辑，我认为您希望用户始终按照选择颜色然后选择模型的顺序进行。
https://codepen.io/Cameron64/pen/YZbrqW?editors=1010
为了保持这个顺序，我将颜色下拉列表设置为在选择模型下拉列表时重置。此外，我将过滤器分组为一个对象，以便在传递给转发器时不会那么冗长
$scope.changeColor = function() {
$scope.filter.model = undefined;
$scope.filter.color = $scope.filter.color || undefined;
}
关于javascript - 级联选择AngularJS过滤器第二次不显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43257265/