我在角色中遇到了<select>
元素的多个问题,并试图了解正在发生的事情。我的第一步是理解为什么我调入的多个console.log()
消息重复出现在控制台中,就像在,而不是像我期望的那样出现的消息,它们出现无限次,如如果是无限循环的一部分。这是一个从ng-options
调用的函数应该如何表现的?如果是这样,我不明白为什么,如果没有,那么我想修复我的循环。
我的HTML:<select ng-options="theorderdate as theorderdate for theorderdate in getOtherOrderDates(Bread.text)" ng-model="randomDateRomantic.randomDateRomantic" ng-change="soRomantic(Bread.text)"></select>
console.log()
消息显示getOtherOrderDates()
消息,如下所示(包括我的评论):
$scope.getOtherOrderDates = function(loaf) {
var istheLoafdaily = false;
var theorderdates = [];
for (var i = 0; i < $scope.theBreadsList.length; i++) {
for (var z = 0; z < $scope.theBreadsList[i].breads.length; z++) {
if ($scope.theBreadsList[i].breads[z].text == loaf && i > 0) //not a daily loaf, goes beyond "Daily Breads"
{
console.log(theorderdates);
theorderdates = theorderdates.concat($scope.theBreadsList[i].breads[z].orderDates); //concat the matched bread's order dates
console.log(theorderdates, $scope.theBreadsList[i].breads[z].orderDates);
theorderdates = _.sortBy(theorderdates, function(m) {
return m.getTime()
});
for (var y = 0; y < theorderdates.length; y++) {
theorderdates[y] = theorderdates[y].toLocaleDateString();
}
theorderdates = _.uniq(theorderdates);
if (theorderdates.length > 0) {
console.log("Something is wrong here"); //problem
$scope.randomDateRomantic.randomDateRomantic = theorderdates[0];
}
console.log(theorderdates);
return theorderdates;
} else if ($scope.theBreadsList[i].breads[z].text == loaf && i == 0) { //a daily loaf, i == 0
console.log("The bread matched is daily", loaf); //***
istheLoafdaily = true;
console.log(theorderdates); //***
theorderdates = theorderdates.concat($scope.theBreadsList[i].breads[z].orderDates); // concat the matched bread's order dates
console.log(theorderdates, $scope.theBreadsList[i].breads[z].orderDates); //***
break; // escape the for loop, should it be two breaks?????? yes...
} else if (istheLoafdaily && i > 0 && $scope.theBreadsList[i].breads[z].orderDates.length > 0) { //not sure what scenario this matches, hence wtf
theorderdates = theorderdates.concat($scope.theBreadsList[i].breads[z].orderDates);
console.log("wtf");
}
}
}
//end of outermost for loop
//not sure what this is doing because this functionality is repeated up there^ (for non-daily breads)
theorderdates = _.sortBy(theorderdates, function(m) {
return m.getTime()
});
for (var y = 0; y < theorderdates.length; y++) {
theorderdates[y] = theorderdates[y].toLocaleDateString();
}
theorderdates = _.uniq(theorderdates);
if (theorderdates.length > 0) {
$scope.randomDateRomantic.randomDateRomantic = theorderdates[0];
console.log("Something is wrong here (daily)"); //problem
}
return theorderdates;
//not sure what this is doing because this functionality is repeated up there^ (for non-daily breads)
//if change to Locale date string then not unique, but if don't change then not a date to sort!!!!!!! >:(
},
我几乎无法获得所有控制台消息,而没有执行任何操作,例如触发ng-change
函数。我只是将每日面包添加到我的购物车中,然后控制台充满了以下消息,我已经在我的代码中加了星号。
我的theBreadsList
不是很长,所以有一些事情会像这样反复发生。即使我在代码中看到两次for循环中断,也无法解释它一直记录到控制台的事实,因为最终循环不会得到满足,而且这不会只要已经提到过。
请指教,谢谢。如果您需要更多信息,我很乐意提供。
答案 0 :(得分:2)
每个digest cycle都会调用getOtherOrderDates
,以便有角度的知道是否更新option
中的select
。这很可能是您多次看到此方法被调用的原因。
如果您担心此循环对性能的影响,您可以在controller
$scope
内预先构建选项,如下所示:
$scope.options = $scope.getOtherOrderDates($scope.Bread.text);
每当$scope.Bread.text
更改,然后在模板中使用$scope.options
。
答案 1 :(得分:0)
为了避免在每个摘要循环中触发循环,您可以使用一次绑定::value
。
<select ng-options="theorderdate as theorderdate for theorderdate in ::getOtherOrderDates(Bread.text)"
ng-model="randomDateRomantic.randomDateRomantic"
ng-change="soRomantic(Bread.text)"></select>
由于ng-options
中的表达式只会被评估一次,并且在第一次评估后将会删除观察器,这将阻止您的函数在下一个摘要循环迭代中被触发。