AngularJS控制器内实现数组匹配过滤（禁用ES6）

嘿，这就帮你搞定这个需求！咱们要做的就是在控制器里写一个自定义过滤函数，只保留$scope.colors中name同时出现在$scope.cars的color字段里的项，而且完全不用ES6语法，兼容旧环境。

实现步骤 #

1. 先收集所有车辆存在的颜色
   先遍历$scope.cars数组，把所有出现过的颜色存到一个映射对象里——用对象做映射的好处是后续查找效率超高，不用每次过滤都遍历整个cars数组。
2. 编写过滤函数
   定义一个绑定到$scope的过滤函数，检查当前颜色项的name是否在刚才的颜色映射里，存在就保留，不存在就过滤掉。

控制器完整代码 #

// 假设这是你的AngularJS控制器逻辑
app.controller('YourController', function($scope) {
    // 给定的原始数据
    $scope.colors = [
        {"name":"blue","count":2}, 
        {"name":"red","count":12}, 
        {"name":"pink","count":5}, 
        {"name":"yellow","count":2}
    ];
    $scope.cars = [ 
        {"brand":"Ford","color":"blue", "seat":"pink" },
        {"brand":"Ferrari","color":"red", "seat":"pink" },
        {"brand":"Rolls","color":"blue","seat":"pink"}
    ];

    // 构建车辆颜色映射表
    var carColorsMap = {};
    for (var i = 0; i < $scope.cars.length; i++) {
        var currentCarColor = $scope.cars[i].color;
        carColorsMap[currentCarColor] = true; // 标记该颜色存在
    }

    // 自定义过滤函数
    $scope.filteredColors = function(colorItem) {
        // 检查当前颜色的name是否在车辆颜色映射中存在
        return carColorsMap.hasOwnProperty(colorItem.name);
    };
});

视图代码优化建议 #

你原来的视图代码已经可以用了，不过如果想显示得更清晰，建议把{{n}}改成具体属性：

<ul> 
    <li ng-repeat="color in colors | filter: filteredColors"> 
        {{color.name}} (Count: {{color.count}})
    </li> 
</ul>

效果说明 #

运行之后，列表只会显示blue和red这两个符合条件的颜色项，完全符合你的期望结果。

内容的提问来源于stack exchange，提问作者Joe82