在AngularJS中通过多个特定模型属性进行过滤(使用OR关系)

12 浏览
0 Comments

在AngularJS中通过多个特定模型属性进行过滤(使用OR关系)

请看这个例子: http://docs.angularjs.org/api/ng.filter:filter

你可以通过使用 来搜索任何电话属性,通过使用 来仅搜索姓名,搜索结果将以姓名进行适当过滤(输入电话号码不会返回任何结果,正如预期的那样)。

假设我有一个模型,其中包含一个 "name" 属性、一个 "phone" 属性和一个 "secret" 属性,我该如何同时根据 "name" 和 "phone" 属性进行过滤,而不是根据 "secret" 属性进行过滤呢?因此,实质上,用户可以输入姓名或电话号码,ng-repeat 将正确地进行过滤,但即使用户输入一个与 "secret" 值的一部分相等的值,也不会返回任何结果。

谢谢。

0
0 Comments

问题的出现原因:

问题的出现是因为需要在AngularJS中根据多个特定的模型属性进行过滤,并且这些属性之间是“或”关系。具体而言,需要根据汽车的名称(name)、年份(year)、价格(price)和里程(km)进行过滤。

解决方法:

为了解决这个问题,可以创建一个自定义的过滤函数,并在视图层中调用这个过滤器。以下是一个示例的解决方案:

在视图层中调用过滤器的方式如下:

ng-repeat="car in cars | filter: customFilter"

其中,"cars"是要过滤的数组,"customFilter"是自定义的过滤函数。

自定义的过滤函数的代码如下:

$scope.customFilter = function(car) {
    var attrs = [car.name.toLowerCase(), car.year, car.price.toString(), car.km.toString()],
        filters = $scope.tableOpts.filter.toLowerCase().split(' '),
        isStringInArray = function (string, array){
            for (var j=0; j

在自定义的过滤函数中,首先将汽车的属性值(名称、年份、价格、里程)转换为小写字母,并将价格和里程转换为字符串。然后将过滤条件按照空格分割成多个单词,并使用isStringInArray函数判断每个单词是否存在于汽车的属性值中。如果存在任何一个单词不匹配,则返回false,否则返回true。

通过以上的解决方法,我们可以在AngularJS中根据多个特定的模型属性进行过滤,并且这些属性之间是“或”关系。

0
0 Comments

多个特定模型属性的过滤在AngularJS中可能会遇到的问题是如何同时筛选多个特定属性。为了解决这个问题,可以创建一个过滤函数来实现这个目的。在官方文档中,可以使用函数来编写任意过滤器。该函数对数组的每个元素进行调用,并返回为其返回true的元素的数组。具体的解决方法是在ng-repeat指令中使用过滤器,并在控制器中定义一个过滤函数。过滤函数中判断如果查询字符串为空或者查询字符串出现在手机品牌或型号中,则返回true,否则返回false。然后在输入框中添加ng-change指令来监听搜索的变化,并触发过滤函数。如果要实现不区分大小写的搜索,可以使用angular.lowercase()函数将查询字符串和手机品牌、型号都转换为小写进行比较。这样就可以实现对多个特定属性的过滤。在处理大型列表时,执行过滤函数的次数可能会很多,这可能会导致UI的性能下降。为了解决这个问题,可以使用控制器中的过滤器来代替上述方法。另外,在使用过滤器时,需要注意将查询字符串也转换为小写,以便进行不区分大小写的比较。以上就是解决多个特定模型属性的过滤问题的原因和解决方法。

0
0 Comments

在AngularJS中,可以将一个对象作为参数传递给过滤器表达式,如API参考中所描述的那样。这个对象可以选择性地应用你感兴趣的属性,如下所示:


[/apcode]

这是一个Plunker示例:http://plnkr.co/edit/kozaU39E74yqjZCpgDqM

请注意,这个示例在AngularJS 1.1.5中运行良好,但在1.0.7中并不总是那么好。在这个示例中,1.0.7会初始化时过滤掉所有内容,然后在你开始使用输入框时才起作用。它的行为就像输入框中有非匹配的值,即使它们一开始是空白的。如果你想使用稳定版本,请尝试在你的情况下使用这个解决方法,但有些情况可能需要使用's解决方法,直到1.2.0发布为止。

看看你的plunker,如果只有一个搜索框,如何实现期望的效果。这是一个挑战...OR部分。

这个答案很好,但并没有回答问题。

如何在只有一个输入框的情况下实现类似于这个示例中的表格:datatables.net

如何获取在发布的Plunker中过滤数据的数量?

0