如何在AngularJS中通过点击链接过滤产品列表数组？

当然可以实现这个按产品类型筛选的功能！我来给你一步步拆解怎么做：

1. 先设置类型选择的下拉控件 #

首先你需要在页面上添加一个绑定了AngularJS模型的下拉列表，用来让用户选择要筛选的产品类型。假设你的产品数据里有一个Tipo字段（比如值为"电吉他"、"原声吉他"），可以这样写：

<select ng-model="selectedType" class="type-filter">
  <option value="">显示所有产品</option>
  <option value="电吉他">电吉他</option>
  <option value="原声吉他">原声吉他</option>
  <!-- 这里添加其他产品类型选项 -->
</select>

这个下拉框的ng-model会把用户选中的类型值存在$scope.selectedType变量里，后面筛选会用到它。

2. 修改ng-repeat的过滤器 #

你现在的ng-repeat已经用了prodsearch过滤器，只需要再叠加一个类型筛选的规则就行，有两种简单的方式：

方式一：直接用对象过滤器（简单快捷）

如果你的产品对象里的类型字段和下拉选项的value完全匹配，直接在现有过滤器后面加一个对象筛选：

<article class="producto" ng-repeat="product in dbproducts | filter:prodsearch | filter: { Tipo: selectedType }">
  <!-- 你的产品内容代码保持不变 -->
</article>

当selectedType为空时（用户选了"显示所有产品"），这个过滤器会自动显示所有产品；选中具体类型时，只返回Tipo字段匹配的产品。

方式二：自定义筛选函数（更灵活）

如果需要更复杂的筛选逻辑（比如模糊匹配、大小写不敏感等），可以在控制器里定义一个筛选函数：

// 在你的AngularJS控制器里添加这个函数
$scope.filterByProductType = function(product) {
  // 如果没有选中类型，返回所有产品
  if (!$scope.selectedType) return true;
  // 这里可以根据需求调整匹配规则，比如忽略大小写
  return product.Tipo.toLowerCase() === $scope.selectedType.toLowerCase();
};

然后修改ng-repeat使用这个函数：

<article class="producto" ng-repeat="product in dbproducts | filter:prodsearch | filter:filterByProductType">
  <!-- 你的产品内容代码保持不变 -->
</article>

注意事项 #

• 确保产品数据里的类型字段（比如Tipo）和下拉选项的value值完全对应，否则筛选会不生效；
• 如果你的产品类型字段名不是Tipo，记得把代码里的Tipo替换成你实际的字段名。

这样就能实现用户选中下拉列表里的类型后，ng-repeat只显示对应类型的产品啦！

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