javascript - js代码中的for循环

Question

我正在根据 js 文件中定义的特定时间段加载每个 div。我有 4 个 div。仅当列表大小大于零(detailsList1 > 0)时，我才想加载 div 4(ng-if="show ==4")。下面是我使用的代码:

<div ng-if="show ==4" ng-controller="detailsController" ng-hide="$rootScope.detailsList1==0">
      <div ng-repeat="data in details" id="{{data.Id}}">
         <div ng-repeat="(key, value) in data" id="{{data.Id}}">
          {{value}}
         </div>
     </div>
  </div>

如果列表大小为零，则不应等待间隔完成，而是跳过此 div 并加载另一个 div。

示例演示:http://plnkr.co/edit/R4yYM522OS3PMIZ5zfzn?p=preview

如果加载到特定 div 的列表为零，关于如何跳过 $interval 的任何建议

Answer 1

为什么不在 ng-if 中执行所有隐藏/显示逻辑，即

ng-if="show == 4 && $rootScope.detailsList1.length > 0"

除非这两个条件都为真，否则这将导致浏览器不呈现 div。

只是一些关于 ng-if、ng-show 和 ng-hide 的随机信息，可能也有帮助。

ng-if 只会将它包裹的 html 添加到 DOM(如果为真)。如果为假，它会完全删除 html。这意味着如果 ng-if 为 false，您将无法访问此 block 中的任何元素。

另一方面，

ng-show/ng-hide 仍然会创建要在 DOM 中显示的 html，它只会添加 ng-hide 作为类何时应该隐藏元素。这允许元素仍然可以通过 JavaScript 访问，即使它们不可见。

---

以上是对问题的误解，我将保留它，因为它在处理 ng-if、ng-show 和 时可能会有帮助ng-隐藏。

在玩过你的 plunker 之后，我能够让它工作，尽管我认为你绝对应该清理你的变量。与其使用 $rootScope.detailsList1 来跟踪数组中的项数，不如使用 $scope.details.length。它将在未来更清洁、更易于阅读和更易于维护。另外，我不确定它们是错误还是有意为之，但您有 3 个不同的列表，似乎都是为了同一件事，$rootScope.detailsList1、$scope.details 和 $rootScope.detailsList。仅从 plunker 中的代码片段来看，我假设所有这 3 个都应该引用同一个数组，并且它们都不应该在 rootScope 上。如果您需要在 Controller 之间传递它，您最好使用服务。

话虽如此，要修复您当前的代码库，只需将此检查添加到间隔函数的末尾

$interval(function() {

    if ($scope.show === 4) {
        if ($rootScope.detailsList <= $rootScope.detailsList1-1) {
            ++$rootScope.detailsList;
        } else {
            $rootScope.detailsList = 0;
            $scope.show = 1;
        }
    }
    else if ($scope.show < 4) {
        ++$scope.show; 
    } else {
        $scope.show = 1;
    }

    // if the details list is empty and show is 4, skip back to 1
    if ($rootScope.detailsList === 0 && $scope.show === 4) {
        $scope.show = 1;
    }

}, 5000, 0);