angular.js ng-modelにjsonをロードする方法は？

おそらく非常に明白な質問だと思いますが、どこにも答えが見つかりませんでした。

サーバーからクライアントに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は変数を使用できますが、すべてを変数にロードできないため、for eachループを使用できます。これは通常、.jsファイルにある「$ Scope」に関連しているようです。

問題は、他のページから.jsファイルにコードをロードできないことです。Angularのすべての例は、次のようなものだけを示しています：

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

したがって、これは便利です。IA）これをすべて手で入力したい場合、かつB）私のデータがすべて事前にわかっている場合...

事前に分からない（データは動的）ので、入力したくありません。

そのため、$ Resourceを使用してAJAX呼び出しをAngularに変更しようとしても、機能しないようです。理解できないかもしれませんが、JSONデータに対する比較的単純なGETリクエストです。

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メソッドは、最初の引数が成功コールバックで、2番目の引数がエラー コールバックであるpromiseオブジェクトを返します。

$http関数のパラメーターとして追加すると、Angularは魔法をかけ、$httpリソースをコントローラーに注入します。

ここにいくつかの例を示しました

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

以下は、JSONデータをAngularモデルに読み込む方法の簡単な例です。

MicrosoftのNorthwind SQL Serverデータベースのオンラインコピーから顧客の詳細のリストを返すJSON 'GET' Webサービスがあります。

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」フィールドから取得し、IDを「CustomerID」フィールドから取得したい。

どうすればいいですか？

私のAngularコントローラーは次のようになります。

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データのリストがWebページに表示され、使用できるようになりました。

その鍵は「ng-options」タグにあります。

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

頭を動かすのは奇妙な構文です！

ユーザーがこのリストの項目を選択すると、「$ scope.selectedCustomer」変数がその顧客レコードのID（CustomerIDフィールド）に設定されます。

この例の完全なスクリプトは、次の場所にあります。

Angularを使用したJSONデータ

マイク

私はインターネットのどこかにある次のコードを使用していますが、ソースを覚えていません。

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