จะโหลด json ลงใน angular.js ng-model ได้อย่างไร?

ฉันมีสิ่งที่ฉันคิดว่าน่าจะเป็นคำถามที่ชัดเจนมาก แต่ฉันหาคำตอบไม่ได้เลย

ฉันแค่พยายามโหลดข้อมูล JSON จากเซิร์ฟเวอร์ของฉันไปยังไคลเอนต์ ตอนนี้ฉันใช้ JQuery เพื่อโหลดด้วยการโทร AJAX (รหัสด้านล่าง)

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

ซึ่งอยู่ในไฟล์ html ตอนนี้ใช้งานได้ แต่ปัญหาคือฉันต้องการใช้ AngularJS ตอนนี้ในขณะที่ Angular CAN ใช้ตัวแปรฉันไม่สามารถโหลดทุกอย่างเป็นตัวแปรได้ดังนั้นฉันจึงสามารถใช้ a สำหรับแต่ละลูปได้ ดูเหมือนว่าจะเกี่ยวข้องกับ "$ Scope" ซึ่งมักจะอยู่ในไฟล์. js

ปัญหาคือฉันไม่สามารถโหลดโค้ดจากหน้าอื่นเป็นไฟล์. js ทุกตัวอย่างของ Angular แสดงเฉพาะสิ่งต่างๆดังนี้:

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

ดังนั้นนี่จะมีประโยชน์ถ้า IA) ต้องการพิมพ์ทั้งหมดนี้ด้วยมือและ B) ถ้าฉันรู้ล่วงหน้าว่าข้อมูลทั้งหมดของฉันคืออะไร ...

ฉันไม่รู้ล่วงหน้า (ข้อมูลเป็นแบบไดนามิก) และฉันไม่ต้องการพิมพ์

ดังนั้นเมื่อฉันพยายามเปลี่ยนการเรียก AJAX เป็น Angular โดยใช้ $ Resource ดูเหมือนจะไม่ได้ผล บางทีฉันคิดไม่ออก แต่มันเป็นคำขอ GET ที่ค่อนข้างง่ายสำหรับข้อมูล JSON

tl: dr ฉันไม่สามารถเรียกให้ AJAX ทำงานเพื่อโหลดข้อมูลภายนอกลงในโมเดลเชิงมุม

ดังที่ Kris กล่าวถึงคุณสามารถใช้$resourceบริการเพื่อโต้ตอบกับเซิร์ฟเวอร์ได้ แต่ฉันรู้สึกประทับใจที่คุณเริ่มต้นการเดินทางกับ Angular - ฉันอยู่ที่นั่นเมื่อสัปดาห์ที่แล้ว - ดังนั้นฉันขอแนะนำให้เริ่มทดลองใช้$httpบริการโดยตรง ในกรณีนี้คุณสามารถเรียกgetวิธีการได้

หากคุณมี JSON ต่อไปนี้

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

โหลดแบบนี้ก็ได้ครับ

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

getวิธีการส่งกลับสัญญาวัตถุซึ่งอาร์กิวเมนต์แรกเป็นความสำเร็จของการเรียกกลับและครั้งที่สองที่ข้อผิดพลาด การติดต่อกลับ

เมื่อคุณเพิ่ม$httpเป็นพารามิเตอร์ของฟังก์ชัน Angular จะสร้างเวทมนตร์และฉีด$httpทรัพยากรลงในคอนโทรลเลอร์ของคุณ

ฉันได้ใส่ตัวอย่างไว้ที่นี่แล้ว

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

นี่คือตัวอย่างง่ายๆในการโหลดข้อมูล JSON ลงในโมเดลเชิงมุม

ฉันมีบริการเว็บ JSON 'GET' ซึ่งส่งคืนรายการรายละเอียดของลูกค้าจากสำเนาออนไลน์ของฐานข้อมูลNorthwind SQL Serverของ Microsoft

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"
            }
        ]
    }

.. และฉันต้องการเติมข้อมูลในรายการแบบเลื่อนลงให้มีลักษณะเช่นนี้ ...

ฉันต้องการให้ข้อความของแต่ละรายการมาจากช่อง "CompanyName" และรหัสมาจากช่อง "CustomerID"

ฉันจะทำอย่างไร

ตัวควบคุมเชิงมุมของฉันจะมีลักษณะดังนี้:

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
         });
}

... ซึ่งเติมตัวแปร "listOfCustomers" ด้วยชุดข้อมูล JSON นี้

จากนั้นในหน้า HTML ของฉันฉันจะใช้สิ่งนี้:

<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 ของเราบนหน้าเว็บพร้อมใช้งานได้แล้ว

กุญแจสำคัญอยู่ในแท็ก "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

มันเป็นไวยากรณ์แปลก ๆ ที่จะทำให้คุณเข้าใจ!

เมื่อผู้ใช้เลือกรายการในรายการนี้ตัวแปร "$ scope.selectedCustomer" จะถูกตั้งค่าเป็น ID (ฟิลด์ CustomerID) ของบันทึกลูกค้านั้น

สามารถดูสคริปต์ฉบับเต็มสำหรับตัวอย่างนี้ได้ที่นี่:

ข้อมูล JSON พร้อม Angular

ไมค์

ฉันใช้รหัสต่อไปนี้พบที่ไหนสักแห่งในอินเทอร์เน็ตจำแหล่งที่มาไม่ได้

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);