CODEWITHSUNDEEP
javascriptangularjs
ALK
ALK

Reputation: 103

angularjs nested ng-repeat function call when finish

I have 2 nested ng-repeat and boolean, which will hide the loading div, but loading div is hiding before all content is rendered. Boolean depends on a callback function which gets all data.

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

How I call the function when all 2 nested loops are finished?

I tried with $watch statement and directive. Thanks You!

Upvotes: 1

Views: 942

Answers (2)

George Kagan
George Kagan

Reputation: 6124

You could use a directive which emits an event when the outer loop finishes.
You can reuse this directive in any loop, just resubscribe to the event.

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');
                });
            }
        }
    };
});

In your controller, subscribe to the event:

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

Usage in view:

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

Upvotes: 1

Nikhil Mohanan
Nikhil Mohanan

Reputation: 1260

can you use $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>

Upvotes: 3

Related Questions