2016-09-17 3 views
2

ajax가있는 Angular Js를 사용하고 있지만 ng-repeat를 사용하면 json 배열에서 출력을 가져올 수 없습니다. 알리미 [Object object]를받는 중 ... $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

을하고있다, 당신은 $ 범위를 사용해야합니다 (당신은 $ 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; 
     }); 
}); 

아래로 각도와 $http를 사용하는 DEMO

+0

내가 먼저 시도, 그것은 모바일 브라우저에서 봄 config에서 몇 가지 문제가 있었는데, 그래서이 방법을 시도했다. –

+0

각도를 사용하는 경우 이것이 방법이며 모바일에서도 작동해야합니다. – Sajeetharan

+0

사실 저는 시스템에서 IP를 사용하여 모바일 브라우저에서 프로젝트를 확인하고 있습니다. 이것이 모바일에서 작동하지 않는 이유입니까? 198.0.X.X처럼 : 8080/home –

관련 문제