ng-repeat closing function event

Looking to create a callback method that gets called every time ng-repeat is triggered.

After doing some research, I found a couple of options:

1. Using ng-init with ng-repeat

This approach involves calling the method using the ng-init property:

<ol ng-repeat="record in records | orderBy: sortCol:true" ng-init="$last && callMethod()">

2. Creating a custom directive

HTML:

<ol ng-repeat="record in records| orderBy: 'name'" on-last-repeat>

AngularJS:

angular.module('myapp', [])  
.directive('onLastRepeat', function() {
    return function(scope, element, attrs) {
        if (scope.$last) setTimeout(function(){
            scope.$emit('onRepeatLast', element, attrs);
        }, 1);
    };
})

.controller('Ctrl', function($scope, $http) {
    $scope.records = [];
    $scope.$on('onRepeatLast', function(scope, element, attrs){
        //perform your actions here
    });
    $http.get('/path/to/record.json')
      .success(function(data) {
          $scope.records = data;
      })
});

However, both methods only trigger once initially (as implied by the name ng-init). I need the method to be called whenever there is a change in the sorting column, order, or the data itself. Unfortunately, these solutions do not address my specific needs.

Any help or suggestions would be greatly appreciated!

Answer №1

Considering that the watch function only monitors changes in values by reference, it seems like the ideal solution here would be to utilize $watchCollection()

Answer №2

Have you attempted using the $watch method for updating records?

$scope.$watch('records.length', function(newArray, oldArray){
    //Perform an action
},true);

Answer №3

After some troubleshooting, I managed to resolve the issue using the code snippet below:

HTML:

<ol ng-repeat="record in ($parent.newItems = (records | orderBy: sortCol:true))">

AngularJs:

$scope.$watchCollection('newItems ', function(newCollection, oldCollection) {
        newCollection && newCollection.length>0 && $scope.doSomething();
});     

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal YouTube upon opening any model or light box

I have a YouTube video in the center of my page, and when I click on any link from the side navigation, a lightbox appears. However, in IE, the lightbox is behind the YouTube video. I have tried setting the Z-index, but it doesn't seem to work. Is the ...

Create a separate server session specifically for handling an ajax request?

Currently, I am working with a collection of PHP server-side scripts that manage user session state by utilizing PHP sessions extensively for authenticated users. For the client side within a mobile application and using Jquery ajax, I am striving to esta ...

Looking to create a clone of an HTML element, make some modifications, and extract the HTML string without impacting the DOM?

After working with some HTML code, I encountered the following: <div style="background:red;width:900px;height:200px" id="wrap"> <div id="inner" style="width:300px;float:left"> ... </div> </div> The tasks at hand are ...

I am looking to create a cascading dropdown list in C# MVC that pulls data from various SQL tables. How can I achieve

I am currently working on a C# MVC web application and facing a challenge in implementing a cascading drop-down list. While I have come across various articles discussing this topic, the uniqueness of my requirements makes it difficult for me to figure out ...

Ways to navigate to a new page using jQuery Mobile

As a newcomer to jquery mobile, I am still learning how ajax handles page transitions, and I suspect the issue may be related to that. In my jqm / phonegap app, I have set up multiple pages. The homepage checks if the user is logged in by retrieving membe ...

What is the method for altering the value of a variable within a function?

Is there a way to update the value of a variable? I attempted the method below, but unfortunately, it was unsuccessful: function UpdateData() { var newValue = 0; $.ajax({ url: "/api/updates", type: &quo ...

Node.js promise not returning expected value

In this scenario, I have created the loginUser model to verify if the user exists or not. The code is functioning properly, however, I am encountering an issue with the isValidPassword function. It always returns a false condition, even when the email and ...

Retrieve the URL with a GET request and remove a specific object

Currently, I am working on developing a CRUD (Create, Read, Update, Delete) App using Express and LowDB. So far, I have successfully implemented the create and read functions, but I am facing issues with the delete function. This is an example of what th ...

`Designing a UI in Ionic version 2`

Is it possible to create a layout page in an Ionic v2 application so that the navbar and sidemenu can be displayed on every page without having to add them individually to each page? For example, ASP.NET uses master pages for websites to contain component ...

Show the last polygon that was created using OpenLayers on the screen

Using this example from OpenLayers website: I am attempting to create a polygon but I would like it to vanish once the polygon is finished. Could anyone offer assistance with this? Thank you :) ...

Deliver the GWT module in JavaScript format

Currently, I am in need of the following: I need to create a GWT module that can be seamlessly incorporated into a GWT app without requiring recompilation - essentially a plug-and-play solution. This module should include a widget along with various cla ...

Pagination in AngularJS that allows users to easily "jump to page"

Looking to enhance my pagination function by adding a textbox and button for users to input the desired page number. Any ideas or reference links on how to go about this? Thanks in advance! Here's my current HTML: <div class="pagingDiv"> <b ...

`amqplib - What is the current number of active consumers on the queue?`

Seeking insight on using the amqplib module for Node JS and RabbitMQ: 1) Is there a method to determine the number of subscribers on a queue? 2) What is the process for ensuring that each queue has only one consumer key? Appreciate any guidance! ...

Exploring how to incorporate Express middleware into Firebase Functions for handling HTTPS requests

Encountering a challenge while using Express middleware with Firebase Functions. In this sample, a function is linked to the app() instance as shown below: app.get('*', (req, res) => { res.send(`Hello ${req.user.name}`); }); exports.autho ...

Sequencing requests and processing data in Node.js through event handling

Is there a way to combine the responses from two requests into one single JSON response? The goal is to have an array containing both {response1JSON} and {response2JSON}, with each response streaming data that needs to be read. function getSongs() { c ...

transferring information from the controller to placeholders within the view using AngularJS

Retrieving a set of data using a GET method in angularjs Controller Function: $scope.edit = function (id) { var edit_url = 'http://localhost/AwtCW2012002/api/restApiController/editQuestion.json?question_id=' + id; $http.get(edit_url) ...

When the update button is clicked, the textfield is hidden; it reappears upon refreshing the page

Our marketplace multi-vendor site on Magento allows sellers to list their products for sale. The frontend displays the price using the following code: Phtml <input onFocus="showPriceCancel('<?php echo $products->getId(); ?>');" clas ...

Tips on modifying anchor tag attributes in cross-domain iframe source URLs to open in a new tab

Is there a way to change the target attribute of an iframe child anchor tag from "_blank" to "_parent" or completely remove it? I'm looking for a script that can help me achieve this. How can I modify or delete properties of an anchor tag within an i ...

Refreshing the View in Ionic and AngularJS Using Controller UpdatesIn this tutorial, we will

As a newcomer to both Ionic and Angularjs, I am currently in the process of developing a simple Ionic app. The main functionality involves displaying a list of classes (sessions), allowing users to book or cancel a class by clicking on an icon, and updatin ...

Upload file via AJAX immediately after downloading it (no need for storage)

Currently, I am in the process of developing a JavaScript script to safeguard an old game development sandbox website from being discarded by its owners. In order to prevent the loss of all the games on the site, I have managed to create a script that allo ...