Event triggered when an image is loaded in AngularJS

Hey everyone, I need some help with my AngularJS code that should display an image when a checkbox is clicked.

This is the HTML code where checkboxes are generated:

<li ng-repeat="Dep in oDep" >
    <input  type="checkbox" ng-model="cboxDepState[Dep.num]" 
ng-change="OnDepStateChange(Dep.num,Dep.nom)" />
</li>

Here is the second part of the HTML code for the loader image:

<div bg data-ng-show="loading['ville']" class="text-center ng-hide">
<img src="" />
</div>

And this is the AngularJS code:

var app = angular
             .module("HomeModule", [])
             .controller("HomeController", function (){
              $scope.loading =[];

 $scope.OnDepStateChange = function (numDep, nom) {              
               $scope.loading['ville'] = true;
               //code inside function takes 5 seconds
               //
                $scope.loading['ville'] = false;
}});

Everything works fine except for the loading image. Can someone please help me fix it?

javascriptangularjs

Answer №1

To optimize the performance of your angular code, it is important to provide some breathing room within long functions. One way to achieve this is by using the $timeout function to execute lengthy processes. Remember to hide any loading indicators once the function has completed.

$scope.OnDepStateChange = function (numDep, nom) {              
      $scope.loading['ville'] = true;

       $timeout(function(){
            //code inside function takes approximately 5 seconds
            //

            $scope.loading['ville'] = false; 
       })         
})

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

Querying with complex aggregations in MongoDB for sorting operations

Can anyone help me with sorting a list of accommodations based on price and number of amenities they offer? The main challenges are converting the price (which is in string format starting with $) to an integer for proper sorting, and determining the cou ...

javascriptmongodbsortingaggregate

Create a button toggle feature to dynamically display data for a specific record within an ng-repeat loop

Currently, I am facing an issue while implementing a start and stop timer in JavaScript for a list of records. To display all the items, I am using ng-repeat. Each repeated element has a Start/Stop toggle button. The problem arises when there are 4 records ...

javascripthtmlcssangularjs

What could be causing my failed CORS request redirection?

My issue involves an angularjs $http call in my application that is currently running on localhost:8080 var url "https://api.acme.com/RX/v1/user"; $http.get(url).success(function (data) { alert('yay'); $scope.user = data; }); The initial re ...

angularjscors

Transferring parent elements' attributes to child components using AngularJS 1.3

I am encountering an issue with Angular JS related to two directives that I have implemented. angular.module('myModule', []) .directive('myFirstDirective', function(){ return { link: function (scope, elem, attr) ...

javascriptangularjsangularjs-directiveangularjs-scope

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

Trouble arises when implementing MultiLineString functionality within LeafletGIS

After receiving a response from the server, I found that I needed to restructure it to fit the GeoJSON standard in order to use it for marker animation in Leaflet. The coordinates also needed to be flipped, as Leaflet uses lat, lng while my data was in lng ...

javascriptarraysleafletgeojsonmultilinestring

Is it possible for closures in JavaScript to cause stack fragmentation?

Could the stack become fragmented due to closures being allocated and not deallocated after a function returns? Closures are essentially stack frames that persist after a function completes execution, similar to a 'stack frame' on the heap rat ...

javascript

Issue arises with asynchronous function outside of mounted lifecycle hook in VueJS

Identifying the Issue I encountered an issue while trying to create an external async function and assign its return value directly to a state variable. In addition, I passed firebase reference and store to this function to avoid importing them again in t ...

javascriptvue.jsasync-awaitvue-componentvuejs3

What is the best way to dismiss the modal window in React upon clicking the "Add product" button?

Hello all, I'm having trouble figuring out how to close the modal window in React. I want it so that when the user clicks on the "Add" button, a modal window opens for data input, and then upon clicking the "Add product" button, the window closes imme ...

javascriptreactjsreduxreact-reduxpopup

Enhanced subscription feature with robust data verification

My script hides the input element and displays a "thanks message" after validation of the input field called emailfield. The "thanks message" is only shown if the email field is validated. Thank you! var nextStep = document.querySelector('#nextStep ...

javascriptdjango

Navigating through IE z-index complications to position a modal *above* a YUI Panel

Within my web application, I have implemented an informational pop-up modal using a <div> element with the CSS attribute "display" set to "none". To display this modal when needed, a JavaScript code snippet is used to toggle the display attribute. W ...

javascripthtmlcssinternet-exploreryui

Checking the form_for validation in Rails before submitting the form

I've been working on ensuring that all the required fields are filled out in my form_for before it is submitted, and although I have made progress, there is still an issue where the form submits before performing the validation check and displaying an ...

javascriptjqueryruby-on-railsforms

When the App is opened, Firestore triggers a function to run, and then again after any changes

I am looking to activate this function when the App is launched, and then whenever there is an update in my firestore data. export const getDuettsPlayer1 = (setDuetts) => { duettsRef.where("player1", "==", firebase.auth().currentUs ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

ASP.net Back-End Code

With the rise in popularity of jQuery and JavaScript for client-side tasks, do you think there is still a significant need for server-side processing with server-side code? Considering the availability of web services that can handle ajax requests, it&apo ...

c#javascriptjqueryasp.netajax

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

javascriptjqueryioscsscordova

Remove all items from the Backbone Collection and delete them from the corresponding Lawnchair storage

I'm currently utilizing Backbone.js along with Lawnchair and backbone.lawnchair.js. My query pertains to the right approach for "emptying" a collection, both in the application itself and in localStorage. At present, I am implementing a method simil ...

backbone.jsjavascriptlawnchair

Combining an unlimited amount of elements in an array using JavaScript

Currently, I am facing a challenge while trying to develop an application using Javascript. What I aim to achieve is a webpage that collects input values from a textbox and stores them in an array. Subsequently, I need to create a function that can add t ...

javascripthtmlarraysadditionarithmetic-expressions

Bootstrap table malfunctioning following completion of ajax request

I am currently facing an issue with my ajax call in my MVC project. Whenever the user clicks on a value using the select, it updates two tables in the project. However, I have noticed that on every other call, the button functionality on the tables breaks. ...

javascriptc#.netajaxbootstrap-5

Extracting graph coordinates from a webpage using web scraping

Looking for assistance with web scraping to extract player rankings from a graph displayed in this link Simply visit the link, click on Rating, and hover over the plotted points. The y-coordinate will be visible along with other relevant information that ...

javascriptpythonhtmlweb-scraping

Express JS get method causing browser tab to hang with continuous loading

After deciding to create my first REST API using Express.js, I embarked on the journey of exploring this new technology. To kickstart the process, I opted to utilize the Express application generator by running npx express-generator. Following that, in th ...

javascriptnode.jsexpress