使用dynamic Filter-AngularJS过滤数组中的对象

现在我的数据结构是

product = [{att1:'2',att2:'red',att3:'gold'},
    {att1:'1',att2:'blue',att3:'wood'},
    {att1:'2',att2:'green',att3:'plastic'},
    {att1:'1',att2:'red',att3:'plastic'}]

我在网页上有一个过滤器，它有三个部分：att1，att2，att3。用户不必为每个零件选择选项

• 对于过滤器att1，它有两个选项：“1”和“2”
• 过滤器att2它有两个选项：“红色”、“蓝色”和“绿色”
• 过滤器att3它有3个选项：“黄金”、“木材”和“塑料”

我可以获得所选的选项。例如：

{att1:['2'，att3:['gold'，'plastic']}

或

{att1:['1']}

我的问题是，如何使用

product.filter

过滤产品数据？

---

谢谢

您可以使用一个易于使用的自定义筛选函数，我使用了

att1

，但您可以将其扩展到所有字段：

var-app=angular.module（“MyApp”，[]）；
app.controller（“MyCtrl”，函数（$scope）{
$scope.products=[{att1:'2'，att2:'red'，att3:'gold'}，
{att1:'1'，att2:'blue'，att3:'wood'}，
{att1:'2'，att2:'green'，att3:'plastic'}，
{att1:'1'，att2:'red'，att3:'plastic'}]；
$scope.filterFunction=函数（元素）{
返回元素.att1.match（/^Ma/）？true:false；
};
});


{{product}}


{{product}}

我为这一个设计了特殊的逻辑，使用三个嵌套循环并不是很好，但它确实完成了这项工作。我相信您可以通过使用一些地图或其他东西来进一步优化它，但我只是采用了通过蛮力实现的方法：）


angular.module（'myApp'，[]）
.service（'ProductService'，function（）{
返回{
产品：[
{att1:'2'，att2:'red'，att3:'gold'}，
{att1:'1'，att2:'blue'，att3:'wood'}，
{att1:'2'，att2:'green'，att3:'plastic'}，
{att1:'1'，att2:'red'，att3:'plastic'}
]
}
})
.controller（'TestCtrl'，函数（ProductService）{
this.ProductService=ProductService；
this.filterObject1={att1:['2'，att3:['gold'，'plastic']}；
this.FilterObject 2={att1:['1']}；
})
.filter（'productFilter'，function（）{
返回函数（输入，过滤器BJ）{
如果（！filterObj）{
返回输入；
}
var newArray=[]；
var filterKeys=Object.keys（filterObj）；
对于（var i=0；i请格式化您的问题您是在寻找如何编写自定义$filter，还是在尝试使用数组筛选函数？不太清楚这里询问了什么或您遇到了什么问题。@Shaunhusa在这种情况下，用户有时会选择
att1
下的选项，有时则不会。因此筛选函数不能使用硬代码过滤产品数据，因为它可能返回
att1==='1'
或
att1=='1'和&att2=='red'
或
（att1=='1'| att1=='2'）&（att2=='green'| att2=='red'））&&att3=='gold'
有时，它是动态的。filterFunction已定义但未被引用？哦，我的坏，修复了@shaunusinall good只需添加到这一点就可以使用类似
angular.filter（'productFilter'，function（）{return function filterFunction（input，arg）{/*您的筛选代码返回一个带有筛选值的新数组*/}）
然后像产品中的产品一样使用它| productFilter
您还可以使用$filter服务检索任何筛选函数，如
var prodFilterFn=$filter（'productFilter'））
@Yaser谢谢！但情况是有时用户选择att1下的选项，有时不选择。因此代码中的
$scope.filterFunction
不能使用硬代码按
att1
过滤产品数据，因为它可能返回
att1.match
或
att1.match&&att2.mach
或
（att1.match | att1.match）&&（att2.match | | att2.match）&&att3.match
有时，它是动态的，我该如何解决这个问题？这只是一个例子，如果你有小提琴或其他可能有助于更清楚地了解你的情况@molly12345，你需要更改过滤函数逻辑以包含用户输入可能发生的任何情况