gpt4 book ai didi

angularjs - ngRepeat 与 ngInit - ngRepeat 不会刷新渲染值

转载 作者:行者123 更新时间:2023-12-02 22:33:52 26 4
gpt4 key购买 nike

我有一个使用 ngRepeater 显示的数组,但通过这个指令,我使用 ngInit 指令来执行应该返回要显示的对象的函数。一切都工作正常,但是当我添加“新建”按钮并向数组添加新值时,只有一次我认为函数应该根据数组值的数量执行时,才会执行函数“SetPreview”。我怎样才能做到这一点?

用户界面:

<body ng-app>

<ul ng-controller="PhoneListCtrl">
<button ng-click="add()">Add</button>
<li ng-repeat="phone in phones" ng-init="displayedQuestion=SetPreview(phone);">
{{displayedQuestion.name}}
<p>{{displayedQuestion.snippet}}</p>
</li>
</ul>
</body>

Controller :

function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];

$scope.add = function(){
this.phones.push({name:'1', snippet:'n'});
};
$scope.SetPreview = function(phone)
{
//here logic which can take object from diffrent location
console.log(phone);
return phone;
};
}

Sample is here - jsfiddle

编辑:
Here is more complicated sample: -> 现在 Phones 集合是空的,当您单击“添加”按钮时,将添加新项目并将其设置为可编辑(您可以更改文本字段中的值),并且当执行 ngRender 时 SetPreview 函数返回可编辑对象(它的工作方式类似于预览)。现在尝试再次单击“添加”按钮,正如您所看到的,第一项的可编辑值仍然呈现给用户,但我想刷新整个 ng-repeater。

最佳答案

您正在遇到 Angular 性能功能。

本质上,Angular 可以看到数组中的元素(例如“A”)是同一个对象引用,因此它不会再次调用 ng-init。这是有效的。即使您将旧列表连接到新列表中,Angular 也会认为它是相同的引用。

如果您创建一个与旧对象具有相同值的新对象,它将具有不同的引用,并且 Angular 会重新初始化它:做你正在寻找的事情的坏例子:http://jsfiddle.net/fqnKt/37/

$scope.add = function(item) {
var newItems = [];
angular.forEach($scope.items, function(obj){
this.push({val:obj.val});
},newItems)

newItems.push({val:item})
$scope.items = newItems;
};

我不推荐在 fiddle 中采用的方法,而是您应该找到一种与 ng-init 不同的方法来触发您的代码。

关于angularjs - ngRepeat 与 ngInit - ngRepeat 不会刷新渲染值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15355122/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com