2017-10-16 105 views
0

我正在加載每個div基於js文件中定義的特定timeperiod。 我有4個div。欲加載的div 4(NG-如果=「節目== 4」)僅當列表尺寸是大於零(detailsList1> 0)。下面是我已經使用的代碼:for循環在js代碼

<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加載任何建議是零

回答

1

爲什麼不只是做所有的隱藏/顯示邏輯在ng-if

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

這會導致瀏覽器無法呈現的股利,除非這兩個條件句是真實的。

只是一些關於ng-ifng-showng-hide的隨機信息,可能也會有所幫助。

ng-if只會添加它包裹的HTML如果它是真的。如果它是假的,它會完全刪除html。這意味着如果ng-if爲假,您將無法訪問此塊中的任何元素。

ng-show/ng-hide另一方面仍然會創建要在DOM中顯示的html,當元素應該隱藏時,它將只添加ng-hide作爲類。這允許元素仍然可以通過JavaScript訪問,即使它們不可見。


以上是問題的誤解,我會離開它與ng-ifng-showng-hide打交道時可能會有所幫助。

在和你的朋友一起玩之後,我能夠得到它的工作,儘管我認爲你應該清理你的變量。而不是使用$rootScope.detailsList1來跟蹤數組中的項目數量,您應該使用$ scope.details.length。它會更清潔,更易於閱讀,並且在未來更容易維護。另外,我不確定它們是錯誤還是故意的,但是您有3個不同的列表,所有列表看起來都是相同的,分別是$rootScope.detailsList1,$scope.details$rootScope.detailsList。從只有plunker中的代碼片斷,我會假設所有這3個應該引用相同的數組,並且它們都不應該在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); 
+1

良好的信息在這裏,但是我建議對複雜的邏輯,直接在HTML,而是將其提取到控制器中的單獨方法中。 –

+0

@泰勒 - 不,它不工作,請找到更新的代碼http://plnkr.co/edit/RbcDfgsankQxETI4Z9ym?p=preview。我認爲我們需要處理每個show = 1或show = 2或show = 3或show = 4所需的$ interval的間隔。我已經在app中指定了間隔$ interval(function(){..}。 js.即使當我添加ng-if =「show == 4 && $ rootScope時,這也是原因。detailsList1.length> 0「它顯示5秒的空白頁面。 – user8727958

+0

@Tyler - +1,但在演示程序中執行時,它不能按預期工作,請查找更新後的pnlkr http://plnkr.co/edit/ sKZuQesNWKji02Xrv02C?p =使用建議的代碼預覽,它是失敗的,即使$ scope.details長度不爲零時也不會顯示div 4。在div4中,我將列表中的每個項目顯示爲幻燈片(這就是您將要使用的原因請參見演示http://plnkr.co/edit/GiivaMe6PrGn3STG1EdD?p=preview,分別列表中的每個項目)。任何輸入? – user8727958