Question

我有以下HTML代码，请注意ng-show需要访问与ng-repeat相同的数据：

   <div ng-repeat="cat in getSelectedCategories()">

        <div ng-show="getFilteredQuestions(cat).hasItems">

            <div ng-repeat="(promptId, q) in getFilteredQuestions(cat).val">

                   // nested loop contents
            </div>
        </div>
    </div>

注意我正在调用getFilteredQuestions()两次，它应该产生完全相同的数据，实际上如果我希望显示一致，它必须产生完全相同的数据！ AngularJS是否通常会为我们缓存此调用，或者是否有一些技巧可以用来缓存该值，因为我在同一个循环中使用它两次。

我在想的是getFilteredQuestions()，在$scope上设置缓存值，内部循环读取缓存而不是再次调用getFilteredQuestions()。

Answer 1

好吧，所以缓存值确实可以正常工作，正如我所预期的那样。可能（1）性能更高，（2）避免“无限消化周期”，（3）确保数据一致性。

基本上，我们现在有了这个，而不是OP中的内容：

 <div ng-repeat="cat in getSelectedCategories()">

         <div ng-show="getFilteredQuestions(cat)">

            <div ng-repeat="(promptId, q) in getFilteredQuestionsCache(cat)">

                   // nested loop contents
            </div>
         </div>
  </div>

注意第二次调用不是getFilteredQuestions() but to getFilteredQuestionsCache（）`。

当调用getFilteredQuestions()时，它会更新控制器中的缓存属性，如下所示：

$scope.getFilteredQuestions = function(){

   // ...
   $scope.filteredQuestionsCache[cat] = obj; //update the cache
   return Object.keys(obj).length > 0;  // for the ng-show decision
};

和getFilteredQuestionsCache()是这样的：

 $scope.getFilteredQuestionsCache = function (cat) {
    return $scope.filteredQuestionsCache[cat];
  };

通过这种方式，ng-show和ng-repeat不会重复调用以获取相同的数据。

Angular嵌套循环中的缓存值

1 个答案: