Question

我正在尝试angularjs框架。

以JSON的形式提供统计信息，如：

[{"Region": "USA",
 "People":[{"Id":2,"Name":"Pals"}, {"Id":1,"Name":"Andrew"}]},
 {"Region": "India",
 "People":[{"Id":2,"Name":"Ram"}, {"Id":1,"Name":"Sam"}]}];

想要提供单一搜索选项，搜索区域和人物的名称。当人名匹配时，必须与该地区一起显示。所以，我尝试编写一个过滤器来过滤ng-repeat。

 Search : <input id="search" type="text" class="form-control" ng-model="Search" placeholder="enter text here"/>
  <br/><br/>
  <div ng-repeat="pregion in stats | searchFilter : Search">
      {{pregion.Region}}
      <div ng-repeat="p in pregion.People">
        &nbsp;&nbsp;&nbsp;{{p.Name}}
      </div>
    </div>

但过滤器似乎返回多个数组，导致错误：$ rootScope：infdig Infinite $ digest循环。

在plunker @ http://plnkr.co/edit/Bm8rlizBf49sZ93pDLfS?p=preview

中完成代码

任何人都可以建议解决方案或替代方法。感谢。

Answer 1

在我看来，问题是您手动复制部分过滤的区域并且输入错误（丢失区域[＆＃39;人物＆＃39;]），因此您的过滤结果与过滤器不匹配什么时候再次通过它。这是我将使用的解决方案：

        angular.forEach(input, function(v){
            if(v.Region.toLowerCase().indexOf(search.toLowerCase()) !== -1){
                cat.push(v);
            } else {
                mod = [];
                tempCat = {};
                angular.forEach(v.People, function(u){
                    if(u.Name.toLowerCase().indexOf(search.toLowerCase()) !== -1){
                        mod.push(u);
                    }
                });
                if (mod.length > 0) {
                  v = angular.copy(v);
                    v.People = mod;
                    cat.push(v);
                }
            }
        });
        return cat;

plunker 1: simple copy

但是，如果你真的想从非地区结果中删除该区域，这里是该类型的直接修复：

        angular.forEach(input, function(v){
            if(v.Region.toLowerCase().indexOf(search.toLowerCase()) !== -1){
                cat.push(v);
            } else {
                mod = [];
                tempCat = {};
                angular.forEach(v.People, function(u){
                    if(u.Name.toLowerCase().indexOf(search.toLowerCase()) !== -1){
                        mod.push(u);
                    }
                });
                if (mod.length > 0) {
                    tempCat.Categoryid = v.Categoryid;
                    tempCat.CategoryName = v.CategoryName;
                    tempCat.CategoryOrder = v.CategoryOrder;
                    tempCat.CategoryImage = v.CategoryImage;
                    tempCat.People = mod;
                    cat.push(tempCat);
                }
            }
        });
        return cat;

plunker 2: typo fix

Angularjs ng-repeat过滤JSON的多个层

1 个答案: