jquery - AngularJS - Loading icon whilst waiting for data/data calculation -

-

मेरे पास एक सरल अंगुल्य http.get है: 

  app.factory ('countriesService' , समारोह ($ http) {वापसी {getCountryData: फ़ंक्शन (किया गया) {$ http.get ('/ resources / json / countries.json') .सुविधा (फ़ंक्शन (डेटा) {done (data);})। आतंक ( फ़ंक्शन (त्रुटि) {चेतावनी ('एक त्रुटि हुई');})}}}}); उदाहरण:। जेएसएएन:  
  {"नोसीटीज़": 66, "बैलेंस": 2103, "जनसंख्या": 63705000, "सिटी इन्फो": [ "सिटीनाम": "लंदन", "सिटी पॉपिलेशन": "7825200", "तथ्यों": {"सबफ़ैक्ट 1": "एक्सज़ी", "सबफ़ैक्ट 2": "एक्सज़ी", "सबफ़ैक्ट 3": "एक्सज़ी", "सबफ़ैक्ट 4": " "" "" "" "" "" "", "सबफ़ैक्ट 5": "श्याम",}, "सिटीनाम": "मैनचेस्टर", "सिटी पॉप्युलेशन": "2584241", "तथ्यों": {"सबफ़ैक्ट 1": "एबीसी", "सबफ़ैक्ट 2": "abc "," सबफ़ैक्ट 3 ":" एबीसी "," सबफ़ैक्ट 4 ":" एबीसी "},}]," जमा करें ": नल," फॉर्मएक्शन ": रिक्त," फॉर्मसींट्रोलर ": रिक्त,}  
 < P> मैंने देखा है कि जब मेरा पृष्ठ एक लाँग है, कभी-कभी डेटा को लोड करने में कुछ समय लग सकता है, उदाहरण के लिए: 
 
  & lt; div & gt; & Lt; a & gt; देशों & lt; / a & gt; : {{Countries.length}} & lt; / div & gt;  
 
 क्या कोणीय का इंतजार / लोडिंग आइकन है जिसे मैं दिखा सकता हूं, जबकि डीआईवी में डेटा आबादी हो रहा है? 
 
 आदर्श रूप से कुछ हल्का है और इसकी आवश्यकता नहीं है

यह मेरा सामान्य दृष्टिकोण है ओज़्ड के बिंदु के लिए, इसकी आवश्यकता है और .gif को दिखाएं / छुपाएं जो लोडिंग को इंगित करता है।

मार्कअप

ng-hide और एनजी-शो का उपयोग करना स्पिनर और तत्व की दृश्यता को नियंत्रित करने के लिए जिसमें आपके आबादी वाले डेटा शामिल होंगे। 

  & lt; p class = "text-center" ng-hide = "data loaded" & gt; & Lt; i वर्ग = "एफए-एफपी-स्पिनर एफए-स्पिन" & gt; & lt; / i & gt; & Lt; / p & gt; & Lt; div ng- शो = "डेटालोडेड" & gt; & Lt; a & gt; देशों & lt; / a & gt; : {{Countries.length}} & lt; / div & gt;

जेएस

अपनी कॉल से पहले, $ scope.dataLoaded से झूठे सेट करें। फिर, आपके सफलता ब्लॉक के भीतर, इसे true पर सेट करें यह भी ध्यान देने योग्य है कि आपको अपने कारखाने में $ scope पारित करने की आवश्यकता होगी 

  app.factory ('countriesService', function ($ http, $ scope) {returnCountryData: function (done) {$ scope.dataLoaded = false; $ http.get ('/ संसाधन / json / countries.json ') .success (फ़ंक्शन (डेटा) {done (डेटा); $ scope.dataLoaded = true;}) .error (फ़ंक्शन (त्रुटि) {चेतावनी (' एक त्रुटि हुई ');}) ;}}});

Comments

Post a Comment

Popular posts from this blog

jsp - No mapping found for HTTP request with URI with annotation config Spring MVC and Jetty -

-
Image
I'm only using annotation configuration, the server starts, but when I use some pages error is displayed: Warning: no mapping found for HTTP request with URI [/WEB-INF/view/main.jsp] name 'org.springframework.web.servlet.DispatcherServlet -D7259e with DispatcherServlet in Controller mapping works fine, but no JSP page is full. I am using Jetty 9.2.0.M0 and Spring MVC 4.0.4 release. JetTyP Config: Private Static Last String CONTEXT_PATH = "/"; Private Static Last String MAPPING_URL = "/ *"; Private Zero Server (Int port) throws exceptions {server server = new server (port); Server.addLifeCycleListener (New LifeCycleListener ()); Server.setHandler (getServletContextHandler (getContext ())); Server.start (); Server.join (); } Private static ServletContextHandler getServletContextHandler (WebApplicationContext context) throws IOException {LOGGER.info ( "ServletContextHandler is ready"); CircleContaxHandler themeHandler = new circactont...
Read more

java - Ajax call to jsp and jsp redirecting to further jsp -

-
I am getting an Ajax call on a jsp page which in turn is redirecting based on the value of a flag variable JSP file. The AJAX call is something like this: $ Ajax ({url: 'uploadwebcamimage.jsp', type: "post", data: {encodeimg: dataUrl, OwnerId: document.Clickpictures.OwnerId.value, OwnerPhone: document.Clickpictures.OwnerPhone.value, mobilepass: document.Clickpictures. Mobilepass.value, emailpass: document.Clickpictures.emailpass.value, mypassword: document.Clickpictures.mypassword.value, mygroupuserid: document.Clickpictures.mygroupuserid.value}, error: work () {warning ('error');} success : Function (msg) {// warning ((msg)); if (msg) indexOf ("true")> = 0) {// how grouplist location.href = "site_index_groupadmin.jsp res1 =?" + to get the grouplist;} else {warning ("unsuccessful");}}}); And in jsp I have done something like this: & lt;% ArrayList & lt; String & gt; List = New Arrestist & lt; Stri...
Read more

runtime error - Cannot find an overload for op_subtraction when subtracting datetime from datetime in powershell -

-
I can not get a surcharge for the error of op_subtraction error while running the code given below, Reporting that the second argument is invalid. The defective line is: if ($ - now - (non-job- $ $ job id.) PSBeginTime -gt [Timespain] :: From Minutes ($ KillTaskTimeMins) { (changed below for help with debugging) if (($ $ - $ when) -gt [Timespain]: : Minutes ($ killTaskTimeMins)) Full code: $ ($ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ throttle jobs are moving at any one time (@ (Get-jobs | object-object {$ _. state -akyu 'Running'}). Count-gate $ throttle) {start-Sleep- Millisecun $ $ Throttle Sleep MMS # Matter any work speculation, kill after X minutes = now $ = matching-date forwarding ($ job-in @ (Get-Job -State Running)) {# $ when = Coalesce (Get- Job -Id $ job.id) .PSBeginTime, $ now) is a custom task to make sure that it is not zero; but the writeer did not help to host, but it was not empty, however $$ = (Get-Job-$ job.id) was removed. PSBeginTime ...
Read more