2016-09-17 7 views
2

ajaxを持つAngular Jsを使用していますが、ng-repeatはjson配列から出力できません。アラートが[オブジェクトオブジェクト]を取得していますが、$scope.names= response[0].id;を使用して、警告で「1」IDを取得しています。私はテーブルのすべてのデータを取得する必要があります。テーブル内のすべてのデータを取得する方法はありますか?モバイルブラウザでは動作しませんが、デスクトップで動作するためコントローラで$httpを使用していません。理由はわかりません。代わりAJAのAngular Js ng-repeatはjson配列からajaxを使用して出力できません

JS

var app = angular.module('studentApp',[]); 
app.controller('StudentCntrl', function($scope){ 

$.ajax({ 
    url : '/fetchAllData', 
    type : 'GET', 
    success : function(response){ 
     $scope.names=response; 
     //alert($scope.names);(This is working) 
      } 
    }); 
}); 

JSP

<div ng-app="studentApp" ng-controller="StudentCntrl"> 

     <div class="table-responsive"> 
     <table class="table table-striped"> 
      <thead> 
      <tr> 
       <th>ID</th> 
       <th>NAME</th> 
       <th>EMAIL</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="x in names"> 
       <td>{{x.id}}</td> 
       <td>{{x.name}}</td> 
       <td>{{x.email}}</td> 

      </tr> 
      </tbody> 
     </table> 
     </div> 

JSON

[{"id":"1","name":"abdul","email":"[email protected]"},{"id":"2","name":"pratyush","email":"[email protected]"},{"id":"3","name":"ankit","email":"[email protected]"},{"id":"45","name":"kjhj","email":"kjhkj"},{"id":null,"name":null,"email":null},{"id":null,"name":null,"email":null},{"id":null,"name":null,"email":null},{"id":"trffs","name":null,"email":null},{"id":"afa","name":"sdgfdsg","email":"dsagdsg"},{"id":"12","name":"pppp","email":"hjk,gh"}] 
+1

「$ http」を挿入しないでください。 – scniro

+0

私は最初に試しましたが、モバイルブラウザでは動作しませんでした。 –

+0

どの角度バージョン、ブラウザタイプとバージョンですか?他人に言及されているように、$ httpが正しく使用されていれば、モバイルで動作するはずです。 – codemax

答えて

1

$のAJAX呼び出し(あなたは$ HTTPを使用する必要があります)との範囲を更新するとき、あなたは$スコープを使用する必要があり、以下のような角度で$httpを使用バインディングを更新するために適用します。

$scope.$apply(function(){ 
    $scope.names = response.data; 
}); 
+0

例を挙げて説明できますか? –

+1

jQueryと$ scopeを使って小さな例を構築しました。$は.done関数に適用されます。私は返された約束オブジェクトを使うので、.doneと.failを使うことを好みます。 http://codepen.io/robbert/pen/rrLQgq/ –

+0

ありがとう、デスクトップとモバイルの両方のブラウザで作業しています.. !! :-) –

1

Xコール、ここで

var app = angular.module('studentApp', []); 
app.controller('StudentCntrl', function($scope,$http) { 
    $http.get('data.json').then(function (response){ 
        console.log(response.data.pages); 
       $scope.names = response.data; 
     }); 
}); 

作業DEMO

+0

私はそれを最初に試みました、それはモバイルブラウザで動作していなかったので、春の設定でいくつかの問題があったので、私はこの方法を試していました。 –

+0

角度を使用している場合はこれが方法であり、モバイルと同様に動作するはずです – Sajeetharan

+0

実際に私のシステムのIPを使用してモバイルブラウザで自分のプロジェクトを確認しています。 198.0.X.Xのように:8080/home –

関連する問題