编程语言
首页 > 编程语言> > javascript-AngularJS-在ngRepeat中重置ngInit

javascript-AngularJS-在ngRepeat中重置ngInit

作者:互联网

假定以下JSON结构与我当前使用的结构相比大大简化了:

$scope.var1 = {
    "test1": {
        "name": "test1",
        "belongsTo": "var1",
        "additionalInformation": "blabla"
    },
    "test2": {
        "name": "test2",
        "belongsTo": "var1",
        "additionalInformation": "blabla"
    },
    "test3": {
        "name": "test3",
        "belongsTo": "var1",
        "additionalInformation": "blabla"
    }
};

$scope.var2 = {
    "test8": {
        "name": "test8",
        "belongsTo": "var2",
        "additionalInformation": "blabla"
    },
    "test2": {
        "name": "test2",
        "belongsTo": "var2",
        "additionalInformation": "blabla"
    },
    "test9": {
        "name": "test9",
        "belongsTo": "var2",
        "additionalInformation": "blabla"
    }
};

$scope.valuesVar1 = {
    "test1": {
        "value": 1
    },
    "test2": {
        "value": 2
    },
    "test3": {
        "value": 3
    },
};

$scope.valuesVar2 = {
    "test8": {
        "value": 4
    },
    "test2": {
        "value": 5
    },
    "test9": {
        "value": 6
    },
};

Var1和Var2代表某些数据,这些数据始终具有相同的结构.对于valuesVar1和valuesVar2相同-它们具有相同的结构,并包含有关var1和var2的一些附加信息.

我试图遍历var1并使用ng-init从valuesVar1获取值.在用户交互时,迭代的分配已更改为var2,因此知道我们正在var2上进行迭代并从valuesVar2获取值.

问题:在var2上进行迭代时,我们应该为“ test2”获得值5.但是由于ngInit已经从迭代var1中“知道” test2,因此该值保持为2.

注意:请不要给出建议更改JSON结构或类似内容的答案-因为我站在这方面无法做到这一点.我已经尝试过复制此处建议的对象:angularjs – ngRepeat with ngInit – ngRepeat doesn’t refresh rendered value-但这不起作用.我认为这是因为ngInit“记住”字符串值“ test2”而不是对象引用(但我不是很清楚:)).

问:如何使ngInit在迭代中再次运行,而在先前的迭代中已经使用了对象的相同键?

我还准备了带有该信息的jsfiddle http://jsfiddle.net/S329r/6/.在运行时,它将遍历var1并输出如下值:

test1: 1
test2: 2
test3: 3

到目前为止一切顺利,我期望如此.但是,当为迭代分配var2时,将显示以下内容:

test2: 2
test8: 4
test9: 6

在这里,我希望test2显示值5.(提示:在jsfiddle演示中,按钮“ Change”将迭代的分配更改为var2,“ Change Back”将其更改为var1).

解决方法:

一种解决方案是确保您为JSON中的每个项目生成唯一的ID.当然,您不能像您所说的那样更改JSON,但是可以强制angularJS生成一个.

将其放入重复循环中:

iter in iterateOver track by $id(iter.name + iter.belongsTo)

只要这种数据组合是唯一的,循环就可以正常工作.

来自文档的更多信息:

For example: item in items track by $id(item). A built in $id() function can be used to assign a unique $$hashKey property to each item in the array. This property is then used as a key to associated DOM elements with the corresponding item in the array by identity. Moving the same object in array would move the DOM element in the same way in the DOM.

编辑
另一个解决方案是稍微改变循环,不要使用ng-init
相反,请按以下方式获取您的值:

<div ng-repeat="iter in iterateOver " >
    {{iter.name}}: {{getValForIter(iter).value}}
</div>

标签:angularjs,angularjs-ng-repeat,angularjs-ng-init,javascript
来源: https://codeday.me/bug/20191029/1958782.html