Làm thế nào để tải json vào ng-model angle.js của tôi?

Tôi có những gì tôi nghĩ có lẽ là một câu hỏi rất rõ ràng, nhưng tôi không thể tìm thấy câu trả lời ở bất kỳ đâu.

Tôi chỉ đang cố gắng tải một số dữ liệu JSON từ máy chủ của mình vào máy khách. Hiện tại, tôi đang sử dụng JQuery để tải nó bằng lệnh gọi AJAX (mã bên dưới).

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

Điều này nằm trong tệp html. Nó hoạt động cho đến nay, nhưng vấn đề là tôi muốn sử dụng AngularJS. Bây giờ, trong khi Angular CÓ THỂ sử dụng các biến, tôi không thể tải toàn bộ vào một biến để tôi có thể sử dụng a cho mỗi vòng lặp. Điều này dường như liên quan đến "$ Scope", thường nằm trong tệp .js.

Vấn đề là tôi không thể tải mã từ các trang khác vào tệp .js. Mọi ví dụ về Angular chỉ hiển thị những thứ như sau:

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

Vì vậy, điều này rất hữu ích, nếu IA) Muốn nhập tất cả điều này bằng tay, VÀ B) Nếu tôi biết trước tất cả dữ liệu của mình là gì ...

Tôi không biết trước (dữ liệu là động) và tôi không muốn nhập nó.

Vì vậy, khi tôi cố gắng thay đổi lệnh gọi AJAX thành Angular bằng cách sử dụng $ Resource, nó dường như không hoạt động. Có lẽ tôi không thể tìm ra, nhưng đó là một yêu cầu GET tương đối đơn giản cho dữ liệu JSON.

tl: dr Tôi không thể làm cho các lệnh gọi AJAX hoạt động để tải dữ liệu bên ngoài vào một mô hình góc.

Như Kris đã đề cập, bạn có thể sử dụng $resourcedịch vụ để tương tác với máy chủ, nhưng tôi có ấn tượng rằng bạn đang bắt đầu hành trình của mình với Angular - tôi đã ở đó vào tuần trước - vì vậy tôi khuyên bạn nên bắt đầu thử nghiệm trực tiếp với $httpdịch vụ. Trong trường hợp này, bạn có thể gọi getphương thức của nó .

Nếu bạn có JSON sau

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

Bạn có thể tải nó như thế này

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

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

Các getphương thức trả về một lời hứa đối tượng mà số đầu tiên là một thành công gọi lại và lần thứ hai một lỗi gọi lại.

Khi bạn thêm $httpdưới dạng một tham số của một hàm, Angular sẽ thực hiện nó và đưa $httptài nguyên vào bộ điều khiển của bạn.

Tôi đã đặt một số ví dụ ở đây

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

Đây là một ví dụ đơn giản về cách tải dữ liệu JSON vào mô hình Angular.

Tôi có dịch vụ web JSON 'GET' trả về danh sách chi tiết Khách hàng, từ bản sao trực tuyến của cơ sở dữ liệu Northwind SQL Server của Microsoft .

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

Nó trả về một số dữ liệu JSON trông giống như sau:

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

..và tôi muốn điền vào danh sách thả xuống với dữ liệu này, trông giống như thế này ...

Tôi muốn văn bản của mỗi mục đến từ trường "CompanyName" và ID đến từ trường "CustomerID".

Tôi sẽ làm điều đó như thế nào?

Bộ điều khiển Angular của tôi sẽ trông như thế này:

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

... điền vào biến "listOfCustomers" bằng tập dữ liệu JSON này.

Sau đó, trong trang HTML của tôi, tôi sẽ sử dụng cái này:

<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>

Và đó là nó. Bây giờ chúng ta có thể thấy danh sách dữ liệu JSON của mình trên trang web, sẵn sàng để sử dụng.

Chìa khóa của điều này là trong thẻ "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

Đó là một cú pháp kỳ lạ để khiến bạn phải lo lắng!

Khi người dùng chọn một mục trong danh sách này, biến "$ scope.selectedCustomer" sẽ được đặt thành ID (trường CustomerID) của bản ghi Khách hàng đó.

Tập lệnh đầy đủ cho ví dụ này có thể được tìm thấy ở đây:

Dữ liệu JSON với Angular

Mike

Tôi sử dụng mã sau đây, tìm thấy ở đâu đó trên internet, mặc dù không nhớ nguồn.

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