AngularJS：如何过滤数组仅保留对象数组指定键中存在的值

没问题，这个需求用AngularJS的自定义过滤函数就能轻松实现，我给你详细拆解步骤：

1. 定义自定义过滤函数 #

在你的控制器里，给$scope添加一个名为colorFilter的函数，这个函数的作用是检查当前传入的颜色是否存在于$scope.cars的color字段中：

app.controller('YourController', function($scope) {
  $scope.colors = ["blue","red","pink","yellow"];
  $scope.cars = [
    {"brand":"Ford","color":"blue"},
    {"brand":"Ferrari","color":"red"},
    {"brand":"Rolls","color":"blue"}
  ];

  // 自定义过滤函数（简洁版）
  $scope.colorFilter = function(color) {
    // 使用Array.some快速判断是否存在匹配项
    return $scope.cars.some(function(car) {
      return car.color === color;
    });
  };

  // 兼容老旧环境的备选写法（用Angular自带的forEach）
  // $scope.colorFilter = function(color) {
  //   var isPresent = false;
  //   angular.forEach($scope.cars, function(car) {
  //     if (car.color === color) {
  //       isPresent = true;
  //     }
  //   });
  //   return isPresent;
  // };
});

2. 在模板中使用过滤器 #

保持你原来的ng-repeat结构，注意要在<li>里加上{{n}}来显示颜色值，否则会显示空列表项：

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

原理说明 #

• 当ng-repeat遍历colors数组时，会把每个元素传入colorFilter函数
• 函数通过some方法（或forEach）检查cars数组中是否有至少一个对象的color字段和当前元素匹配
• 如果匹配成功，函数返回true，这个颜色会被保留在列表中；否则返回false，该元素会被过滤掉

最终运行后，列表只会显示blue和red两个选项，完全符合你的需求。

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