ng-repeat不显示行

I am trying to learn AngularJS and started my first code sample to get github repos of a user.

我正在尝试学习AngularJS并开始我的第一个代码示例来获取用户的github repos。

My html page is like this:

我的html页面是这样的：

<!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>

and my controller is like this

我的控制器是这样的

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

AngularJS is loaded as it is showing the {{error}} is being shown on the screen as some value

AngularJS被加载，因为它显示{{error}}在屏幕上显示为某个值

the table header is properly loaded but nothing else is shown. Even the url is returning data when seen in broswer.

表头已正确加载但未显示任何其他内容。当在broswer中看到时，甚至网址都会返回数据。

There are no errors in the console also.

控制台中也没有错误。

Where am i going wrong?

我哪里错了？

2 个解决方案

#1

You need to move the declaration of your promise handlers (onDataDownloaded, onErro) to before you try to use them. Plnkr

在尝试使用它们之前，需要将promise数据处理程序的声明（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);
})();

#2

Problem is with your controller.

问题出在您的控制器上。

Your HTML:

你的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 should be:

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:

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

You have given the controller as ng-controller="CustomersController" which is wrong. If you checked the console it shows you the error clearly.

您已将控制器指定为ng-controller =“CustomersController”，这是错误的。如果您检查了控制台，它会清楚地显示错误。

Hope this will help you.

希望这会帮助你。

#1