2016-11-07 10 views
1

ng-repeatとbooleanの2つのネストされたng-repeatとbooleanがあり、読み込みdivは隠されますが、すべてのコンテンツがレンダリングされる前にdivを読み込んでいません。ブール値はすべてのデータを取得するコールバック関数に依存します。私はすべて2つのネストされたループが終了されている関数を呼び出す方法anglejs終了時のng-repeat関数の呼び出し

<tr ng-repeat="package in packages track by $index"> 
    <td> {{ pack.Name }}</td> 
    <td> 
     <select ng-hide="package.spinStart" class="form-control" ng-model="package.selectedVersion"> 
      <option ng-repeat="pack in package.allPackageVersions track by $index" 
        value="{{pack.Version}}" 
        ng-hide="pack.shouldHide" 
        ng-disabled="!expertModeOn && pack.shouldDissable" 
        ng-style="!expertModeOn && pack.shouldDissable && {'color':'#ddd'}"> 

        {{pack.NuGetPackageId}} | {{pack.Version}} | {{pack.Published}} 
      </option> 
     </select> 

私は$watchステートメントとdirectiveで試しました。 ありがとうございました!

答えて

3

$ lastを使用できますか?

<!DOCTYPE html> 
 
<html data-ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body data-ng-controller="testController"> 
 

 

 
    <div ng-repeat="package in packages"> 
 
    {{package.name}} 
 
    <div ng-repeat=" pkg in package.selectedVersion" ng-init="$last && call()"> 
 
     {{pkg.name}} 
 
    </div> 
 
    </div> 
 

 
    <script> 
 
    angular 
 
     .module('myApp', []) 
 
     .run(function($rootScope) { 
 
     $rootScope.title = 'myTest Page'; 
 
     }) 
 
     .controller('testController', ['$scope', 
 
     function($scope) { 
 
      $scope.packages = [{ 
 
      name: 'test1', 
 
      selectedVersion: [{ 
 
       name: 'test_ver1' 
 
      }, { 
 
       name: 'test_ver2' 
 
      }, { 
 
       name: 'test_ver3' 
 
      }] 
 
      }, { 
 
      name: 'test2', 
 
      selectedVersion: [{ 
 
       name: 'test_ver1' 
 
      }, { 
 
       name: 'test_ver2' 
 
      }, { 
 
       name: 'test_ver3' 
 
      }] 
 
      }]; 
 

 
      var counter = 0 
 
      $scope.call = function() { 
 
      counter++ 
 
      if (counter == $scope.packages.length) { 
 
       alert("All loops finished"); 
 
      } 
 
      } 
 
     } 
 
     ]) 
 
    </script> 
 
</body> 
 

 
</html>

+0

この作品は本当に素晴らしい、まだいくつかの問題を持っていますが、以前よりも90%優れています。どうもありがとうございました! –

+0

:)。 –

1

あなたは、外側のループが終了するイベントを発するディレクティブを使用することができます。
このディレクティブは、イベントに再登録するだけで、どのループでも再利用できます。お使いのコントローラで

app.directive('onRepeatFinish', function($timeout) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      // $last is a boolean set by angular inside ng-repeats 
      if (scope.$last) { 
       // Wait for view to fully render 
       $timeout(function() { 
        // Emit upwards the tree 
        scope.$emit('repeatFinished'); 
       }); 
      } 
     } 
    }; 
}); 

、イベントをサブスクライブ:ビューで

$scope.$on('repeatFinished', function() { 
    $scope.showLoader = false; 
}); 

使用法:

<tr ng-repeat="package in packages track by $index" on-repeat-finish> 
+0

ネストされたループでは機能しません。最後の入れ子になったループがいつ終了するかを知りたい。 – Gerfried

関連する問題