angularjs invoking a function within a nested ng-repeat once it's completed

Question

angularjs invoking a function within a nested ng-repeat once it's completed

My issue involves 2 nested ng-repeat loops and a boolean variable. The goal is to hide the loading div once all content is rendered, but currently the loading div disappears before that happens. The boolean variable is dependent on a callback function that fetches all the necessary 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>

I am looking for a way to call the function only after both nested loops have finished executing. I have experimented with using $watch statements and directives without success. Any suggestions are appreciated!

javascript angularjs

Answer 1

Answer №1

Is it possible to utilize $last in this scenario?

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

Answer 2

Is it possible to utilize $last in this scenario?

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

Answer 3

Answer №2

If you want to signal the completion of an outer loop, consider using a custom directive that triggers an event.
This directive can be easily reused in various loops by simply subscribing to the event.

app.directive('onLoopFinish', 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 event upwards through the scope tree
                    scope.$emit('loopFinished');
                });
            }
        }
    };
});

In your controller, listen for the event:

$scope.$on('loopFinished', function() {
    $scope.hideLoader = true;
});

Usage in template:

<div ng-repeat="item in items" on-loop-finish>

Answer 4

If you want to signal the completion of an outer loop, consider using a custom directive that triggers an event.
This directive can be easily reused in various loops by simply subscribing to the event.

app.directive('onLoopFinish', 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 event upwards through the scope tree
                    scope.$emit('loopFinished');
                });
            }
        }
    };
});

In your controller, listen for the event:

$scope.$on('loopFinished', function() {
    $scope.hideLoader = true;
});

Usage in template:

<div ng-repeat="item in items" on-loop-finish>

angularjs invoking a function within a nested ng-repeat once it's completed

Answer №1

Answer №2

Similar questions

The error message "Uncaught TypeError: Unable to access property 'url' of an undefined object - Google Image API" appeared

using configureStore instead of createStore

When the HTML content matches a specific value, initiate a click event to trigger

Introduce an additional parameter to the Prestashop Cart entity

Alternatives to AMP in AngularJS

Dynamically defined type literals in Typescript

Combining Entities Using Immutable JavaScript

How about a unique scrolling experience?

Rotating images on a canvas

JavaScript is limited to functioning within the content area of WordPress websites

The HTTP GET request is failing to trigger

Preventing Servlet Redirection in HTML: A Step-by-Step Guide

Deciphering unidentified Json data

What is the specific event in Angular used to bind the chosen date from a Calendar component?

How to transfer the application version from package.json to a different non-JSON file in Angular and node.js

Exploring the world of jQuery and Ajax to retrieve a full HTML framework

What is the most effective method for testing event emitters?

Design a hover zone that allows for interaction without disrupting click events

What is the most effective method for displaying error messages in Extjs?

Utilize URL parameters in Node.js and Express for effective communication