114

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

サーバーからクライアントに 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外部データをAngularモデルにロードするためにAJAX呼び出しを機能させることができません。

4

3 に答える 3

189

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リソースをコントローラーに注入します。

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

于 2012-10-23T13:17:44.817 に答える
28

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」変数がその Customer レコードの ID (CustomerID フィールド) に設定されます。

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

Angular を使用した JSON データ

マイク

于 2014-01-24T12:40:49.837 に答える