javascript - AngularJS ng-repeat 带过滤器的数组

标签 javascript arrays angularjs filter angularjs-ng-repeat

我有一个 JS 对象数组。

$scope.users = [{
    "name": "alice",
    "city": "london",
    "wards": [{
            "id": 1,
            "number": 24
        },
        {
            "id": 2,
            "number": 25
        },
        {
            "id": 3,
            "number": 26
        }
    ]
},
{
    "name": "bob",
    "city": "london",
    "wards": [{
            "id": 1,
            "number": 24
        },
        {
            "id": 2,
            "number": 25
        },
        {
            "id": 4,
            "number": 27
        }
    ]
}
]

我有一个 ng-repeat="user in users | filter: searchUser

此处searchUser可以包含名称城市区号。 现在,对于 namecity 的搜索工作正常,但对于对象子数组 wards 搜索wards number 则效果不佳em>.

有没有一种 angularJS 方法可以实现这个目标?

最佳答案

没有。您需要编写自己的自定义过滤器。

这是一个示例 jsfiddle,使用输入搜索进行了测试

爱丽丝,鲍勃,伦敦,26, 27

http://jsfiddle.net/1dura7m3/

如果要精确匹配,则将-1更改为0

app.filter('myFilter', function(){
    return function(users, search){
    if(!search) return users;
    if(!users || !users.length) return users;
    searchInLower = search.toString().toLowerCase();
    users = users.filter(function(user){
        matches = false;
        if(user.name){
        usernameInLower = user.name.toString().toLowerCase();
        matches = matches || usernameInLower.indexOf(searchInLower) !== -1;
      }
      if(user.city){
        cityInLower = user.city.toString().toLowerCase();
        matches = matches || cityInLower.indexOf(searchInLower) !== -1;
      }
      if(user.wards && user.wards.length && !matches){
        for(var i = 0; i < user.wards.length; i++){
         ward = user.wards[i];
         for(var key in ward){
           objectKeyValueInLower = ward[key].toString().toLowerCase();
           matches = matches || objectKeyValueInLower.indexOf(searchInLower) !== -1;
         }
        }
      }

      return matches
    });
    return users;
  }
})

关于javascript - AngularJS ng-repeat 带过滤器的数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54320156/

相关文章:

javascript - 如何将元素高度调整为另一个元素的高度?

java - 使用 Angular js 显示图像

javascript - Protractor 图像上传不适用于 IE 和 firefox

javascript - 连接两个表单数据

javascript - 如何单独显示/隐藏具有相同类名的div?

java - 管理文件java上的大数组

javascript - 如何将 "inject"partialView元素转化为DOM添加jQuery代码?

c++ - 指向未指定大小的数组的指针 "(*p)[]"在 C++ 中是非法的,但在 C 中是合法的

arrays - 在 Swift 中,如何根据另一个数组对一个数组进行排序?

javascript - Browserify 在浏览包含 package.json 的文件夹时会覆盖自己的配置吗?