使用github API显示repo提交

时间:2014-04-10 01:55:22

标签: javascript jquery angularjs api github

我正在使用Github API和AngularJS,我想显示一个repo的提交,点击我从用户那里提取的repo的名称

这是我现在的HTML:

<ul ng-repeat="repo in repos">
    <li><a href="{{repo.html_url}}" target="_blank"> {{repo.name}} </a></li>
</ul>

这是拉动这个的功能:

function GithubController($scope, $http) {
   $scope.getInfo = function () {
     $scope.userNotFound = false;
     $scope.loaded = false;

     $http.get("https://api.github.com/users/" + $scope.username)
           .success(function (data) {
              if (data.name == "") data.name = data.login;
              $scope.user = data;
              $scope.loaded = true;
           })
           .error(function () {
              $scope.userNotFound = true;
           });
     $http.get("https://api.github.com/users/" + $scope.username + "/repos").success(function (data) {
        $scope.repos = data;
        $scope.reposFound = data.length > 0;
     });
  }
}

我知道我需要使用Jquery来点击li元素来填充DOM,但我不知道从哪里开始。

以下是Github API的提交页面的链接: https://developer.github.com/v3/repos/commits/

1 个答案:

答案 0 :(得分:2)

拥有存储库后,您可以获得以下提交:

$scope.getCommits = function(repo) {
  $http.get("https://api.github.com/repositories/" + repo.id + "/commits").success(function(data) {
    repo.commits = data;
  })
}

您不需要jQuery来显示它们。这是一个快速示例,说明如何使用嵌套的ng-repeat列出它们:

<ul ng-repeat="repo in repos">
  <li>
    <div>
      <a ng-click="getCommits(repo)"> {{repo.name}} </a>
      <div class="well">{{repo.name}}
        <ul>
          <li ng-repeat="commit in repo.commits">
            <div><pre>{{commit | json}}</pre></div>        
          </li>
        </ul>
      </div>
    </div
  </li>
</ul>

这是一个有效的演示:http://plnkr.co/eWDT8xsssv5ofQJ8YjiJ

注意 - 某些请求会产生409 (Conflict)响应。我不确定为什么。有些存储库只有一个提交。因此,您可能需要单击几个以查找具有多个提交的一个。