Question

我的存储库所有Conributors列表中的存储库列表存在问题。

我想在使用GitHub Api下载的存储库列表中创建贡献者列表。但是，我无法为每个存储库获取这些数据并将它们放在html中。有谁知道如何做到这一点？提前感谢您的帮助

我的代码：应用程序在HTML

<div ng-controller="gitApi" ng-app="app">
    <div class="container">
        <h1 class="text-center">
                    <span ng-hide="userData" />Loading</span>
                    <span />{{userData.name}}</span>
                    <br>
                    <a href="{{userData.html_url}}" class="btn btn-default">
                             {{userData.login}}
                        </a>

                </h1>
        <div class="panel  panel-default">
            <div class="panel-heading">
                <form class="form-inline">
                    <span>
                            <h4>Repos <span class="badge">{{repoData.length}}</span>
                    <input ng-model="searchText" placeholder="Search" class="form-control input-sm">
                    </h4>
                    </span>
                </form>
            </div>
            <div class="panel-body">
                <div class="list-group">
                    <div ng-repeat="orgs in orgsData | filter:searchText  | orderBy:predicate:reverse" class="list-group-item ">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>
                                            <a href="{{repo.html_url}}" target="_blank">
                                            {{orgs.name}}
                                        </a>
                                            <small>{{orgs.description}}</small>
                                        </h4>
                                <small>
                                        <a href="{{orgs.homepage}}" class="">
                                            <i class="fa fa-link"></i> WebPage
                                        </a>
                                    </small>
                            </div>
                            <div class="col-md-6">
                                Conributors List:
                                <div ng-repeat=" | filter:searchText  | orderBy:predicate:reverse" class="list-group-item ">
                                    <div class="row">
                                        <div class="col-md-12">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

APP.js

angular.module('app', [])
    .controller('gitApi', ['$scope', '$http', function($scope, $http) {

        $scope.reposLoaded = false;

        $scope.userLoaded = false;

        $scope.orgsLoaded = false;

        $http.get("https://api.github.com/users/angular")
            .success(function(data) {
                $scope.userData = data;
                loadOrgsRepos();
            });



        var loadOrgsRepos = function() {
            $http.get("https://api.github.com/orgs/angular/repos")
                .success(function(data) {
                    $scope.orgsData = data;
                });
        }

        $scope.predicate = '-updated_at';

    }]);

Answer 1

您可以从contributors_url获取所有贡献者网址并为其中的每一个进行API调用，将结果存储在原始$scope.orgsData数组中：

"use strict";

var githubApp = angular.module('app', []);

githubApp.controller('gitApi', ['$scope', '$http', '$q', function($scope, $http, $q) {

  $http.get("https://api.github.com/users/angular")
    .success(function(data) {
      $scope.userData = data;
      loadOrgsRepos();
    });

  var loadOrgsRepos = function() {
    $http.get("https://api.github.com/orgs/angular/repos")
      .success(function(data) {

        $scope.orgsData = data;

        var contribs = [];
        for (var i in data) {
          contribs.push(data[i].contributors_url);
        }

        $q.all(contribs.map(function(item) {
            return $http({
              method: 'GET',
              url: item
            });
          }))
          .then(function(results) {
            results.forEach(function(val, i) {
              $scope.orgsData[i].contributors = val.data;
            });
          });
      });
  }

  $scope.repo_sort = '-updated_at';
  $scope.contrib_sort = '-contributions'
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body id="page-top" class="index">
  <div ng-controller="gitApi" ng-app="app">
    <div class="container">
      <h1 class="text-center">
        <span ng-hide="userData">Loading</span>
        <span>{{userData.name}}</span>
        <br>
        <a href="{{userData.html_url}}" class="btn btn-default">
            {{userData.login}}
        </a>
      </h1>
      <div class="panel  panel-default">
        <div class="panel-heading">
          <form class="form-inline">
            <span>
                <h4>Repos <span class="badge">{{repoData.length}}</span>
            <input ng-model="searchText" placeholder="Search" class="form-control input-sm">
            </h4>
            </span>
          </form>
        </div>
        <div class="panel-body">
          <div class="list-group">
            <div ng-repeat="orgs in orgsData | filter:searchText  | orderBy:repo_sort:reverse" class="list-group-item ">
              <div class="row">
                <div class="col-md-8">
                  <h4>
                    <a href="{{repo.html_url}}" target="_blank">
                        {{orgs.name}}
                    </a>
                    <small>{{orgs.description}}</small>
                  </h4>
                  <small>
                      <a href="{{orgs.homepage}}" class="">
                          <i class="fa fa-link"></i> WebPage
                      </a>
                  </small>
                </div>
                <div class="col-md-6">
                  Conributors List:
                  <div class="list-group-item">
                    <div class="row">
                      <div class="col-md-4">
                        name
                      </div>
                      <div class="col-md-4">
                        avatar
                      </div>
                      <div class="col-md-4">
                        contributions
                      </div>
                    </div>
                  </div>
                  <div ng-repeat="contrib in orgs.contributors | filter:searchText | orderBy:contrib_sort:reverse" class="list-group-item">
                    <div class="row">
                      <div class="col-md-4">
                        <a href="{{contrib.html_url}}" target="_blank">
                            {{contrib.login}}
                        </a>
                      </div>
                      <div class="col-md-4">
                        <img ng-src="{{contrib.avatar_url}}" height="42" width="42" />
                      </div>
                      <div class="col-md-4">
                        <p>
                          {{contrib.contributions}}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Here是另一个小提琴

AngularJS GitHub API | Conributors列在存储库列表中

1 个答案: