重复调用 Ng-Options 表达式

Question

我在 angular 中的 <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 循环，也无法解释它一直记录到控制台的事实，因为最终循环不会得到满足，这不会花费只要提到过。

请指教，谢谢。如果您需要更多信息，我很乐意提供。

Answer 1

getOtherOrderDates会在每个digest cycle中调用，这样angular知道是否更新option中的select。这很可能是您看到此方法被多次调用的原因。

如果您担心此循环对性能的影响，您可以在 controller 中预先构建选项，将其存储在 $scope 中，如下所示：

$scope.options = $scope.getOtherOrderDates($scope.Bread.text);

每当 $scope.Bread.text 更改时，然后在模板中使用 $scope.options。

Answer 2

为避免在每个摘要循环中触发循环，您可以使用一次绑定 ::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 中的表达式将只被评估一次，并且观察者将在第一次评估后被删除，这将停止在下一次摘要循环迭代中触发您的函数。

DOCS

重复调用 Ng-Options 表达式

Ng-Options Expression Repeatedly Called

javascript

angularjs

ng-options