Question

我根据js文件中定义的某个时间段加载每个div。我有4个div。我只想在列表大小大于零的情况下加载div 4（ng-if =＆＃34; show == 4＆＃34;）（detailsList1＆gt; 0）.Below是我使用过的代码：

<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中，如果它是真的。如果为false，则完全删除html。这意味着如果ng-if为false，您将无法访问此块中的任何元素。

另一方面，

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

以上是对这个问题的误解，我会留下它，因为它在处理ng-if，ng-show和ng-hide时可能会有所帮助。

在与你的plunker一起玩之后，我能够让它工作，虽然我认为你应该清理你的变量。您应该只使用$ scope.details.length，而不是使用$rootScope.detailsList1来跟踪数组中的项目数。它将更清洁，更易于阅读，并且在将来更易于维护。此外，我不确定它们是错误还是故意的，但是您有3个不同的列表，所有列表似乎都是相同的，$rootScope.detailsList1，$scope.details和$rootScope.detailsList。从plunker的片段中，我会假设所有这三个都应该引用相同的数组，并且它们都不应该在rootScope上。如果您需要在控制器之间传递它，您可以更好地使用服务。

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

$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);

for j循环中的循环代码

1 个答案: