完成時angularjs嵌套的ng-repeat函數調用

我有2個嵌套的ng-repeat和布爾值，它會隱藏加載div，但加載div在呈現所有內容之前隱藏。布爾依賴於獲取所有數據的回調函數。完成時angularjs嵌套的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>

我如何打電話的時候，所有的2個嵌套的循環完成的功能？

我試着用$watch聲明和directive。謝謝你！

來源

2016-11-07 Александър Кирилов

你可以使用$最後？

<!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>

來源

2016-11-07 10:52:09

這工作真是太好了，還是有一些問題，但比以前好90％。非常感謝你！ –

:)。我很高興你喜歡我的解決方案 –

你可以使用它發出事件時外環完成一個指令。
您可以在任何循環中重複使用此指令，只需重新訂閱該事件即可。

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>

來源

2016-11-07 11:30:55

這不適用於嵌套循環。我們想知道最後一個嵌套循環何時完成。 – Gerfried

完成時angularjs嵌套的ng-repeat函數調用

回答

相關問題