ng-repeat가 행을 표시하지 않습니다.

나는 agular js를 배우려고 노력 중이며 사용자의 github repos를 얻기 위해 첫 번째 코드 샘플을 시작했습니다.ng-repeat가 행을 표시하지 않습니다.

<!DOCTYPE html> 
<html ng-app="githubViewer"> 

    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="gitHubRepoController"> 
    {{error}} 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
     <th>Name</th> 
     <th>Full Name</th> 
     <th>HTML Url</th> 
     <th>Description</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="repo in repos"> 
      <td>{{repo.name}}</td> 
      <td>{{repo.full_name}}</td> 
      <td>{{repo.html_url}}</td> 
      <td>{{repo.description}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </body> 

</html>

내 제어기 some value

으로 화면에 표시되고 그것이 {{error}}를 도시 된 바와 같이 로딩이

(function() { 
    var app = angular.module("githubViewer",[]); 

    var gitHubRepoController = function($scope, $http){ 
    $http.get("https://api.github.com/users/lakshman553/repos") 
     .then(onDataDownloaded, onError); 

    var onDataDownloaded = function(response) { 
    console.log(response.data); 
    $scope.repos = response.data; 

    }; 
    $scope.error = "some value"; 
    var onError = function(reason) { 
    $scope.error = reason; 
    }; 
    }; 

    app.controller("gitHubRepoController",gitHubRepoController); 
})();

각도 JS 같다 :

내 HTML 페이지 이렇

테이블 헤더가 제대로로드되었지만 그 밖의 것은 표시되지 않습니다. broswer에서 보았을 때도 URL이 데이터를 반환합니다.

콘솔에도 오류가 없습니다.

어디로 가고 있습니까?

출처

2016-06-21 Lakshman Pilaka

fiddle 또는 plunkr에서이 문제를 설정할 수 있습니까? – master565

response.data가 데이터를 반환하는 경우 콘솔에서 체크인 했습니까? – gaurav5430

{{repos.length}}를 인쇄하면 무엇을 얻게됩니까? –

사용하기 전에 약속 핸들러 (onDataDownloaded, onErro)의 선언을 이동해야합니다. Plnkr

(function() { 
    console.log('this is the app') 
    var app = angular.module("githubViewer",[]); 

    var gitHubRepoController = function($scope, $http){ 
    var onDataDownloaded = function(response) { 
     $scope.repos = response.data; 
    }; 
    var onError = function(reason) { 
     $scope.error = reason; 
    }; 
    $http.get("https://api.github.com/users/lakshman553/repos") 
    .then(onDataDownloaded, onError); 
    }; 

    app.controller("gitHubRepoController",gitHubRepoController); 
})();

출처

2016-06-21 14:30:10

다른 해결책은 function 문 대신 함수 선언을 사용하는 것입니다. function onError (reason) {...} var 대신 onError = function (reason) {...} ;. Hoisting을 사용하면 $ http.get 호출에서 사용되는 지점에서 onError가 정의되지 않은 상태로 남게됩니다. 권상에 대한 설명은 http://code.tutsplus.com/tutorials/javascript-hoisting-explained--net-15092에서 확인할 수 있습니다. –

body 태그에 언급 된 ng-controller를 변경하지 않고 어떻게 작동합니까? – Oshadha

질문의 HTML 마크 업이 좋습니다. NV 컨트롤러는 gitHubRepoController로 설정됩니다. 질문은 처음에 읽은 후에 편집되었습니다. 오타였던 –

컨트롤러에 문제가 있습니다.

귀하의 HTML :

<body ng-controller="CustomersController"> 
    {{error}} 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
     <th>Name</th> 
     <th>Full Name</th> 
     <th>HTML Url</th> 
     <th>Description</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="repo in repos"> 
      <td>{{repo.name}}</td> 
      <td>{{repo.full_name}}</td> 
      <td>{{repo.html_url}}</td> 
      <td>{{repo.description}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </body>

HTML이 있어야한다 :

<body ng-controller="gitHubRepoController"> 
{{error}} 
<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Full Name</th> 
     <th>HTML Url</th> 
     <th>Description</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="repo in repos"> 
     <td>{{repo.name}}</td> 
     <td>{{repo.full_name}}</td> 
     <td>{{repo.html_url}}</td> 
     <td>{{repo.description}}</td> 
    </tr> 
    </tbody> 
</table> 
</body>

JS는 :

(function() { 
    var app = angular.module("githubViewer",[]); 

    var gitHubRepoController = function($scope, $http){ 

     var onDataDownloaded = function(response) { 
      console.log(response.data); 
      $scope.repos = response.data; 
     }; 

     $scope.error = "some value"; 

     var onError = function(reason) { 
      $scope.error = reason; 
     }; 

     $http.get("https://api.github.com/users/lakshman553/repos") 
      .then(onDataDownloaded, onError); 
    }; 

    app.controller("gitHubRepoController",gitHubRepoController); 
})();

당신은 잘못 ng-controller="CustomersController"으로 컨트롤러를 부여했다. 콘솔을 확인하면 오류가 명확하게 표시됩니다.

희망이 도움이 될 것입니다.

출처

2016-06-21 14:39:29 Oshadha

을 질문에서 수정했습니다. 그래도 고마워 –

ng-repeat가 행을 표시하지 않습니다.

답변

관련 문제