简体   繁体   English

AngularJS ng-repeat在带有过滤器的数组上

[英]AngularJS ng-repeat over an array with filter

I have a JS array of objects. 我有一个对象的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
        }
    ]
}
]

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

Here searchUser can contain name , city and ward number . 这里searchUser可以包含姓名城市病房号 Now the search is working fine for name and city but not for the sub array of objects wards to search for ward number . 现在,对于名称城市 ,搜索工作正常,但对于要搜索病房号的对象病房的子阵列却不能。

Is there an angularJS way with which I could achieve this? 有没有我可以实现的angularJS方法?

No. You need to write your own custom filter. 否。您需要编写自己的自定义过滤器。

Here is a sample jsfiddle, tested with input search 这是一个示例jsfiddle,已通过输入搜索进行了测试

alice, bob, london, 26, 27 爱丽丝,鲍勃,伦敦,26,27

http://jsfiddle.net/1dura7m3/ http://jsfiddle.net/1dura7m3/

If you want exact match, then change -1 to 0 如果要精确匹配,则将-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;
  }
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM