Angular JS - 将 JavaScript 过滤逻辑应用于 Angular Filter

Question

这个问题来自这个问题

在 Javascript 中，我有这段代码是为了进行过滤，这样我就可以显示数组中的元素，colors当它们也显示为cars中的值时

var colors = ["blue","red","pink","yellow"];
var cars = [{"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];
var filteredColors = colors.filter(function(color) { 
    return cars.some(function(car) { 
        return car.color === color;
    }); 
});
console.log(filteredColors);

我试图在 Angular JS 中应用它，这样做：

$scope.colors =["blue","red","pink","yellow"];
$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];
$scope.filteredColors = function() {
    var colorsvar = $scope.colors;
    var carsvar = $scope.cars;
    return colorsvar.filter(function(color) { 
        return carsvar.some(function(car) { 
            return car.color === color;
        });
    });
};

然后在视图中：

<ul>
    <li ng-repeat="n in colors | filter: filteredColors"> {{n}}
    </li>
</ul>

结果应该是

蓝

红

但它并没有正确过滤。在此处查看工作 plunkr 欢迎任何帮助，谢谢！

Answer 1

您可以使用自定义过滤器，如下所示，检查演示

演示

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors =["blue","red","pink","yellow"];
$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];
 
})
app.filter('myFilter', function() {
    // the filter takes an additional input filterIDs
    return function( filterColors, inputArray) {
        var filtered = [];
       angular.forEach(inputArray,function(key,value){
             if(filterColors.includes(key.color) && !filtered.includes(key.color)) {
                filtered.push(key.color);
             }
       })
       return filtered;
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="n in colors | myFilter: cars  track by $index"> {{n}}
    </li>
</ul>
</div>

Answer 2

无需调用过滤器。 只需调用ng-repeat内的函数

 <li ng-repeat="n in filteredColors()"> {{n}}
 </li>

演示

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.colors =["blue","red","pink","yellow"];
$scope.cars=[ {"brand":"Ford","color":"blue"}
           ,{"brand":"Ferrari","color":"red"}
           ,{"brand":"Rolls","color":"blue"}];
$scope.filteredColors = function() {
    var colorsvar = $scope.colors;
    var carsvar = $scope.cars;
    return colorsvar.filter(function(color) { 
        return carsvar.some(function(car) { 
            return car.color === color;
        });
    });
};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="n in filteredColors()"> {{n}}
    </li>
</ul>
</div>