[javascript] जेसन को मेरे angular.js एनजी मॉडल में कैसे लोड करें?


Answers

एक कोणीय मॉडल में जेएसओएन डेटा को लोड करने का एक सरल उदाहरण यहां दिया गया है।

मेरे पास एक JSON 'GET' वेब सेवा है जो Microsoft के नॉर्थविंड SQL सर्वर डेटाबेस की ऑनलाइन प्रति से ग्राहक विवरणों की एक सूची देता है।

http://www.iNorthwind.com/Service1.svc/getAllCustomers

यह कुछ JSON डेटा देता है जो इस तरह दिखता है:

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..और मैं इस डेटा के साथ एक ड्रॉप डाउन सूची पॉप्युलेट करना चाहता हूं, इस तरह दिखने के लिए ...

मैं प्रत्येक आइटम का टेक्स्ट "कंपनी नाम" फ़ील्ड से और "ग्राहक आईडी" फ़ील्ड से आने वाली आईडी से चाहता हूं।

मैं यह कैसे करूंगा ?

मेरा कोणीय नियंत्रक इस तरह दिखेगा:

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

... जो JSON डेटा के इस सेट के साथ "listOfCustomers" चर भरता है।

फिर, मेरे एचटीएमएल पेज में, मैं इसका इस्तेमाल करूंगा:

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

और बस। अब हम एक वेब पेज पर हमारे JSON डेटा की एक सूची देख सकते हैं, जिसका उपयोग करने के लिए तैयार है।

इसकी कुंजी "एनजी-विकल्प" टैग में है:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

यह आपके सिर को पाने के लिए एक अजीब वाक्यविन्यास है!

जब उपयोगकर्ता इस सूची में कोई आइटम चुनता है, तो "$ scope.selectedCustomer" चर उस ग्राहक रिकॉर्ड के आईडी (ग्राहक आईडी फ़ील्ड) पर सेट किया जाएगा।

इस उदाहरण के लिए पूर्ण स्क्रिप्ट यहां पाई जा सकती है:

कोणीय के साथ JSON डेटा

माइक

Question

मेरे पास ऐसा लगता है जो शायद मुझे एक बहुत ही स्पष्ट सवाल है, लेकिन मुझे कहीं भी जवाब नहीं मिला।

मैं बस अपने सर्वर से क्लाइंट में कुछ JSON डेटा लोड करने की कोशिश कर रहा हूं। अभी, मैं इसे एक AJAX कॉल (नीचे कोड) के साथ लोड करने के लिए JQuery का उपयोग कर रहा हूं।

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

यह एचटीएमएल फाइल में स्थित है। यह अब तक काम करता है, लेकिन मुद्दा यह है कि मैं AngularJS का उपयोग करना चाहता हूं। अब, जबकि कोणीय चर का उपयोग कर सकते हैं, मैं पूरी चीज को एक चर में लोड नहीं कर सकता, इसलिए मैं प्रत्येक लूप के लिए उपयोग कर सकता हूं। ऐसा लगता है कि "$ स्कोप" से संबंधित है, जो आमतौर पर .js फ़ाइल में स्थित होता है।

समस्या यह है कि मैं अन्य पृष्ठों से कोड को .js फ़ाइल में लोड नहीं कर सकता। कोणीय के प्रत्येक उदाहरण केवल इस तरह की चीजें दिखाता है:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

तो, यह उपयोगी है, अगर आईए) हाथ से यह सब टाइप करना चाहते हैं, और बी) यदि मुझे पहले से पता है कि मेरा सभी डेटा क्या है ...

मुझे पहले से पता नहीं है (डेटा गतिशील है) और मैं इसे टाइप नहीं करना चाहता हूं।

इसलिए, जब मैंने $ संसाधन का उपयोग करके एंजेल कॉल को एंग्लर में बदलने की कोशिश की, तो यह काम नहीं कर रहा है। शायद मैं इसे समझ नहीं सकता, लेकिन यह JSON डेटा के लिए अपेक्षाकृत सरल GET अनुरोध है।

tl: dr मैं कोणीय मॉडल में बाहरी डेटा लोड करने के लिए AJAX कॉल को काम नहीं कर सकता।






Links