angularjs - ngRepeat 和 ngInit - ngRepeat 不刷新渲染值 [英] angularjs - ngRepeat with ngInit - ngRepeat doesn't refresh rendered value
问题描述
我有一个使用 ngRepeater 显示的数组，但是使用这个指令我使用了 ngInit 指令，它执行应该返回要显示的对象的函数.一切正常，但是当我添加新建"按钮向数组添加新值时，函数SetPreview"只执行一次，我认为函数应该根据数组值的数量执行.我怎样才能做到这一点?
I have array which is displayed using ngRepeater but with this directive I'm using ngInit directive which execute function which should return object to be displayed. Everything works perfectly but when I added "New" button where I add new value to array then function "SetPreview" is executed only once I think function should be executed depending from the amount of array value. How can I do that?
界面:
<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>
控制器:
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;
};
}
这里是更复杂的示例: -> 现在电话集合是空的，当你点击添加按钮时添加新项目并设置为可编辑(您可以更改文本字段中的值)，并且在执行 ngRender 时 SetPreview 函数返回可编辑对象(它的工作方式类似于预览).现在再次尝试单击添加"按钮，您可以看到第一个项目的可编辑值仍然呈现给用户，但我想刷新整个 ng-repeater.
Here is more complicated sample: -> Now collection of Phones is empty, when you click Add button new item is added and is set as editable(you can change value in text field) and when ngRender is executed SetPreview function returns editable object(it’s work like preview). Now try click Add button again and as you can see the editable value of first item is still presented to user, but I want to refresh entire ng-repeater.
推荐答案
您遇到了 Angular 性能特性.
You are running into an Angular performance feature.
本质上，Angular 可以看到数组中的元素(例如'A')是相同的对象引用，因此它不会再次调用 ng-init.这是有效的.即使您将旧列表连接到新列表中，Angular 也会看到它是相同的引用.
Essentially Angular can see that the element in the array ('A' for example) is the same object reference, so it doesn't call ng-init again. This is efficient. Even if you concatenated an old list into a new list, Angular would see that it it the same reference.
如果你创建一个与旧对象具有相同值的新对象，它有一个不同的引用，Angular 会重新初始化它:做你正在寻找的坏例子:http://jsfiddle.net/fqnKt/37/
If instead you create a new object with the same values as the old object, it has a different reference and Angular re-inits it: Bad example that does what you are looking for: 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 不同的方法来触发您的代码.
I don't recommend the approach taken in the fiddle, but rather you should find a different method than ng-init to trigger your code.
这篇关于angularjs - ngRepeat 和 ngInit - ngRepeat 不刷新渲染值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
