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

asp.net - Procedure or function "Procedure name" expects a parameter "Param name" which was not supplied occurs rarely -

-
I have a VB Net has a web service function that will send criteria to an SQL server stored function. Everything works perfectly for two months in the deployment machine. but now error The process or function GetEmployeeDetails is expected to have a parameter @progress which was not supplied 'P> posted on the machine Just came once. Everything works fine before and after the error. Web service code: public function GetLocation (ByVal as the oldNumber integer, ByVal integer as NewNumber, ByVal as the location string, Byval progress form In the form of a string, byVal name as string, byVal ID as string, try the string as Command1 = New SqlCommand ("GetEmployeeDetails" Connection1) with Command1. CommonType = CommandType Stored Surechers Parameter.ed ("@ old number", SQLDB type.int). Value = old number. Parameter.ed ("New Numer", SQLDB type.ins). Value = Newamer. Parameter. Add ("@Space", SQLBT Ype.VarChar, 10). Value = loc...
Read more

c++ - Redefined variable in the other module -

-
Why do we redefine the variable in other modules, so it is OK to add this module together? I have written two modules main.cpp and module.cpp as the following: // - main.cpp-- // # include & lt; Stdio.h & gt; Int main () {int i = 5; Printf ("I value is% d", i); } and // - module.cpp - // int i = 7; I am now compiling and adding g ++ as the following: g ++ -c main .cpp g ++ - c module. cao g ++ - o bin main.o module.o and it's okay. But I hope the compilation will be successful, while the linker will throw an exception like redefining varaible when I'm running .bin output then the value of i is 5 . UPD: I understand that if we use I as global variable module main.cpp that linker will throw an error. The main variable in the function is a local variable of i function. It is not visible and is present outside the function is. Consider the following example #include & lt; Iostream & gt; Int i = 3; Int main (...
Read more

c# - The item with identity 'Id' already exists in the metadata collection. Parameter name: item -

-
मेरी सभी संस्थाओं का आधार वर्ग है: सार्वजनिक वर्ग इकाई & lt; TKey & gt; : आईएरिटीटी & lt; टीके & gt; {गतिशील आईईआरटीईटी.आईडी {प्राप्त करें} इस आईआईडी; } सेट {this.Id = मान; }} सार्वजनिक TKey Id {get; सेट; }} उदाहरण के लिए स्थिति इकाई: [मेटाडाटा टाइप (टाइपफ (स्टेटसमैटडेटा))] सार्वजनिक आंशिक श्रेणी की स्थिति: इकाई & lt; बाइट & gt; {सार्वजनिक स्ट्रिंग शीर्षक {प्राप्त करें; सेट; }} जब मैं डेटाबेस के विरुद्ध क्वेरी चलाऊँगा तो मुझे निम्न त्रुटि मिलती है: "पहचान 'आईडी वाला आइटम पहले से ही मेटाडेटा संग्रह में मौजूद है। पैरामीटर का नाम: आइटम" क्या यह तय करने का कोई तरीका है या यह किसी वारसा के कारण हुई समस्या है और मैं किसी भी वर्ग से अपनी संस्थाओं का वारिस नहीं कर सकता हूं? यह एक सामान्य त्रुटि है, कुछ जानकारी के लिए खोज करते हुए, मैंने देखा कि: दो तालिकाओं को एक प्राथमिक कुंजी के लिए एक ही नाम हो सकता है लाइटस्विच टेबल्स को देखो, उन सभी को एक प्राथमिक कुंजी है जिन्हें आईडी कहा जाता है। इसलिए, मैं सभी संस्थाओं की समीक्षा करता ह...
Read more