Json'u angular.js ng modelime nasıl yüklerim?

Muhtemelen çok açık olduğunu düşündüğüm bir soru var ama hiçbir yerde cevap bulamadım.

Sadece sunucumdan istemciye bazı JSON verileri yüklemeye çalışıyorum. Şu anda, JQuery'yi bir AJAX çağrısıyla yüklemek için kullanıyorum (aşağıdaki kod).

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

Bu html dosyasında bulunur. Şimdiye kadar çalışıyor, ancak sorun şu ki AngularJS'i kullanmak istiyorum. Şimdi, Açısal CAN değişkenleri kullanırken, her şeyi bir değişkene yükleyemiyorum, böylece her döngü için bir kullanabiliyorum. Bu, genellikle .js dosyasında bulunan "$ Scope" ile ilişkili görünüyor.

Sorun şu ki, diğer sayfalardaki kodu .js dosyasına yükleyemiyorum. Angular'ın her örneği yalnızca şuna benzer şeyler gösterir:

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

Yani, eğer IA) Bunların hepsini elle yazmak istiyorsan, VE B) Tüm verilerimin ne olduğunu önceden biliyorsam ...

Önceden bilmiyorum (veriler dinamiktir) ve yazmak istemiyorum.

Dolayısıyla, $ Resource kullanarak AJAX çağrısını Angular olarak değiştirmeye çalıştığımda, işe yaramıyor gibi görünüyor. Belki anlayamıyorum, ancak JSON verileri için nispeten basit bir GET isteği.

tl: dr Harici verileri açısal bir modele yüklemek için AJAX çağrılarını çalıştıramıyorum.

Kris'in bahsettiği gibi, $resourcehizmeti sunucuyla etkileşime girmek için kullanabilirsiniz , ancak yolculuğunuza Angular ile başladığınızı anlıyorum - geçen hafta oradaydım - bu yüzden doğrudan $httphizmetle denemeye başlamanızı tavsiye ederim . Bu durumda getyöntemini çağırabilirsiniz .

Aşağıdaki JSON'a sahipseniz

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

Bu şekilde yükleyebilirsin

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

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

getYöntem, bir döner söz ilk argüman olan nesne başarı geri ve ikinci bir hata geri arama.

Bir $httpişlevin parametresi olarak eklediğinizde , Angular sihir yapar ve $httpkaynağı denetleyicinize enjekte eder .

Buraya bazı örnekler koydum

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

JSON verilerinin Angular modeline nasıl yükleneceğine ilişkin basit bir örnek.

Microsoft'un Northwind SQL Server veritabanının çevrimiçi bir kopyasından Müşteri ayrıntılarının bir listesini döndüren bir JSON 'GET' web hizmetim var .

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

Aşağıdaki gibi görünen bazı JSON verilerini döndürür:

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

.. ve böyle görünmek için bu verilerle bir açılır listeyi doldurmak istiyorum ...

Her öğenin metninin "CompanyName" alanından ve kimliğinin "CustomerID" alanlarından gelmesini istiyorum.

Bunu nasıl yaparım?

Açısal denetleyicim şöyle görünür:

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

... bu JSON veri kümesiyle bir "listOfCustomers" değişkenini doldurur.

Sonra, HTML sayfamda şunu kullanırım:

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

Ve bu kadar. Artık kullanıma hazır bir web sayfasında JSON verilerimizin bir listesini görebiliriz.

Bunun anahtarı "ng-seçenekleri" etiketindedir:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

Kafanı dolaştırmak garip bir sözdizimi!

Kullanıcı bu listeden bir öğe seçtiğinde, "$ kapsam.selectedCustomer" değişkeni bu Müşteri kaydının kimliğine (Müşteri Kimliği alanı) ayarlanacaktır.

Bu örnek için tam komut dosyası burada bulunabilir:

Angular ile JSON verileri

mikrofon

Aşağıdaki kodu kullanıyorum, internette bir yerde buldum ama kaynağı hatırlamıyorum.

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