forループのjsコード

Question

私は各divをjsファイルで定義されている特定の時間間隔に基づいてロードしています。 私は4つのdivを持っています。私はdiv要素4をロードする（NG-場合=「ショー== 4」）リストのサイズがゼロよりも大きい場合にのみ（detailsList1> 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> 

リスト場合sizeが0の場合、間隔が終了するのを待つ必要はなく、このdivをスキップして別のdivを読み込みます。

サンプルデモ：ちょうどng-if IEの表示/非表示ロジックのすべてをしないのはなぜhttp://plnkr.co/edit/R4yYM522OS3PMIZ5zfzn?p=preview

リストは、特定のdivにロードする場合は$間隔をスキップする方法上の任意の提案がゼロ

Answer 1

です

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

これは、これらの条件文の両方に該当する場合を除き、ブラウザはdiv要素をレンダリングしないように原因となります。

ng-if、ng-show、ng-hideについてのちょっとした情報があります。

ng-ifは、真であればDOMにラップされたhtmlのみを追加します。 falseの場合は、htmlを完全に削除します。つまり、ng-ifがfalseの場合、このブロック内のどの要素にもアクセスすることはできません。

ng-show/ng-hideは、DOMに表示されるhtmlを作成しますが、要素を非表示にする場合は、ng-hideをクラスとして追加します。これにより、要素が表示されなくてもJavaScriptでアクセスできます。

---

上記の質問の誤解だったng-if、ng-show、およびng-hideを扱うときには役立つかもしれないと、私はそれを残します。

プランナーで遊んだ後、私はそれを働かせることができましたが、あなたは間違いなくあなたの変数をきれいにするべきだと思います。 $rootScope.detailsList1を使用して配列内の項目数を追跡するのではなく、$ scope.details.lengthを使用するだけです。これは、よりクリーンで、読みやすく、将来的には維持しやすくなります。また、バグか意図的なのかどうかは分かりませんが、3つの異なるリストがあります。同じように見えるものはすべて$rootScope.detailsList1、$scope.details、および$rootScope.detailsListです。プランナーのスニペットから、これらの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);