由ng-repeat和搜索过滤器结果引起的无限循环

时间:2016-07-31 09:32:04

标签: javascript arrays angularjs

返回搜索结果如下:

[
  {
    "id": 0,
    "name": "UserManagement",
    "parent": "modules",
    "grandpa": "non",
    "viewname": "User Management",
    "level": "module",
    "template": "UserManagement",
    "keywords": "user management users manager managing ",
    "description": "module UserManagement My goal is simple. It is a complete understanding of the universe, why it is as it is and why it exists at all . Stephen Hawking",
    "partitions": {

    }
},
{
    "id": 1,
    "name": "UsersRoles",
    "viewname": "Users Roles",
    "level": "partition",
    "parent": "UserManagement",
    "grandpa": "modules",
    "template": "UsersRoles",
    "keywords": "users roles accounts ",
    "description": "partition UsersRoles The black hole information paradox is a puzzle resulting from the combination of quantum mechanics and general relativity",
    "usecases": {

    }
},
{
    "id": 2,
    "name": "Login",
    "viewname": "Log in",
    "level": "usecase",
    "parent": "UsersRoles",
    "grandpa": "UserManagement",
    "template": "Login",
    "keywords": "log in",
    "description": " usecase login black hole information paradox"
},
{
    "id": 3,
    "name": "EditProfile",
    "viewname": "Edit Profile",
    "level": "usecase",
    "parent": "UsersRoles",
    "grandpa": "UserManagement",
    "template": "EditProfile",
    "keywords": "edit profile",
    "description": "usecase editprofile black hole information paradox"
},
{
    "id": 7,
    "name": "Accounting",
    "parent": "modules",
    "grandpa": "non",
    "viewname": "Accounting",
    "level": "module",
    "template": "Accounting",
    "keywords": "accounts",
    "description": "module accounting My goal is simple. It is a complete understanding of the universe, why it is as it is and why it exists at all . Stephen Hawking",
    "partitions": {                        
    }
},
{
    "id": 10,
    "name": "NewFiscalRecord",
    "viewname": "New Fiscal Record",
    "level": "usecase",
    "parent": "AccountsAndFiscalRecords",
    "grandpa": "Accounting",
    "template": "NewFiscalRecord",
    "keywords": "NewFiscalRecord",
    "description": "usecase new fiscal record"
},
{
    "id": 11,
    "name": "FiscalReports",
    "viewname": "Fiscal Reports",
    "level": "partition",
    "parent": "Accounting",
    "grandpa": "modules",
    "template": "FiscalReports",
    "keywords": "FiscalReports",
    "description": "partition Fiscal Reports",
    "usecases": {
    }
}

] 并且由爷爷分组结果'和父母'属性我使用了lodash.js,如下所示:

var nest = function (seq, keys) {
        //console.log(keys.length)
        if (!keys.length)
            return seq;
        var first = keys[0];
        var rest = keys.slice(1);
        return _.mapValues(_.groupBy(seq, first), function (value) {
            return nest(value, rest)
        });
    };
var nested = nest(result, ['grandpa','parent']);            

并返回"嵌套"到ng-repeat里面的视图, '嵌套'是什么' searchFor'过滤器返回:

<div ng-repeat="node in filteredModules = (modules | searchFor:searchString track by $index">    
    {{node.name}}    
</div>

但它导致了这个问题,我无法弄清楚原因。

  

错误:[$ rootScope:infdig] 10 $ digest()迭代达成。中止!   观察者在最后5次迭代中被解雇:[[{&#34; msg&#34;:&#34; fn:regularInterceptedExpression&#34;,&#34; newVal&#34;:119,&#34; oldVal&#34; :115}],[{&#34; msg&#34;:&#34; fn:regularInterceptedExpression&#34;,&#34; newVal&#34;:123,&#34; oldVal&#34;:119}] ,[{&#34; msg&#34;:&#34; fn:regularInterceptedExpression&#34;,&#34; newVal&#34;:127,&#34; oldVal&#34;:123}],[{& #34; msg&#34;:&#34; fn:regularInterceptedExpression&#34;,&#34; newVal&#34;:131,&#34; oldVal&#34;:127}],[{&#34; msg& #34;:&#34; fn:regularInterceptedExpression&#34;,&#34; newVal&#34;:135,&#34; oldVal&#34;:131}]]

注意:当我将结果返回到视图而不对数据进行分组时,它不会导致该问题。当打印&#39;嵌套&#39;在控制台中没有在视图上查看它,它运行良好,不会导致错误。 这里试图解释更多:https://jsfiddle.net/qw332bkc/

编辑:是否有另一种方法可以将结果分组给爷爷&#39;和父母&#39;属性?

1 个答案:

答案 0 :(得分:2)

我也遇到过这个

为我解决这个问题的是从js脚本文件中过滤而不在ng-repeat标记中进行过滤操作

因此,在您的情况下,解决方案可能是在控制器中创建过滤函数,并且该函数将在每次触发时将排序数组分配给$ scope。然后,从ng-repeat中重复遍历整个数组。

编辑:

  

问题在于你每次都在创建一个新数组,所以它是一个角度需要跟踪的新东西。据我所知,ng-repeat运行,然后立即再次检查其集合,以查看该循环中是否有任何变化。因为该函数返回一个新数组,这被视为一个变化。

取自: AngularJS InfDig error (infinite loop) with ng-repeat function that returns array of objects