Question

我已经找到了解决这些问题的方法，但Angular对我来说是非常外来的语法，并且每种方法似乎都在幕后做了很多。我是Web开发的新手，这是我使用AngularJS的第一个使用API的项目，我刚刚开始探索JavaScript。根据我的理解，这是我迄今所取得的成就。 AngularJS从BitBucket API获取JSON数据，然后Angular创建一个JavaScript对象来访问数据数组。

这里分别是controller.js和index.html片段：

var ngApp = angular.module('ng-app', []);
ngApp.controller('repoCntrl', function($scope, $http) {
  $scope.commitsData = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
      .success(function(data) {
        $scope.commitsArray = data;
      });
  }
  $scope.commitsData();
});

<!doctype html>
<html lang="en" ng-app="ng-app">

<head>
  <title>Page Title</title>
  <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js></script>
  <script src="controllers.js"></script>

</head>

<body ng-controller="repoCntrl">
  <h3>Public activity in battlemidget's python-salesforce repository</h3>
  <table border="1" class="table table-striped">
    <tr>
      <th>Commits</th>
      <th>Comments</th>
      <th>Parent
        <br>Branch(es)</th>
      <th>Date</th>
      <th>Username</th>
    </tr>
    <tr ng-repeat="commit in commitsArray">

      <td>{{commit[0].hash.substr(0,6)}}</td>
      <td>{{commit[0].message}}</td>
      <td>
        <p>{{commit[0].parents[0].hash.substr(0,6)}}
          <br>{{commit[0].parents[1].hash.substr(0,6)}}
        </p>
      </td>
      <td>{{commit[0].date}}</td>
      <td>{{commit[0].author.raw}}</td>

    </tr>
  </table>
</body>

</html>

在尝试填充表格时，我认为ng-repeat 在表格中插入三个空白行。我想知道造成这种情况的原因以及如何解决这个问题。谢谢。

导致三个空白行的原因是什么？ 以下是显示空行和{{commit[0]}}数据的图片： http://i.stack.imgur.com/G69xt.png

一旦我解决了这个问题，我需要遍历提交数组from i=0 while i <= commit.length（在这种情况下，api的第一页是30次提交，但是调用commit.length并没有返回任何内容。

现在我已经确定了JSON数组中所有必需信息的位置，我如何遍历commit[i]数组来填充表？ 我在这里找到的唯一解决方案是编写一个JS循环，将所有表格html解析为字符串，并在html中插入id标记。

我相当自信我只是没有正确使用AngularJS ng-repeat，它应该为我处理这一切，但文档似乎并没有帮助我。任何见解将不胜感激。提前谢谢。

Answer 1

使用ng-if="commit[0].message != null"

过滤掉错误数据

var ngApp = angular.module('ng-app', []);
ngApp.controller('repoCntrl', function($scope, $http) {
  $scope.commitsData = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
      .success(function(data) {
        $scope.commitsArray = data;
      });
  }
  $scope.commitsData();
});

<!doctype html>
<html lang="en" ng-app="ng-app">

<head>
  <title>Page Title</title>
  <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js></script>
  <script src="controllers.js"></script>

</head>

<body ng-controller="repoCntrl">
  <h3>Public activity in battlemidget's python-salesforce repository</h3>
  <table border="1" class="table table-striped">
    <tr>
      <th>Commits</th>
      <th>Comments</th>
      <th>Parent
        <br>Branch(es)</th>
      <th>Date</th>
      <th>Username</th>
    </tr>
    <tr ng-repeat="commit in commitsArray" ng-if="commit[0].message != null">

      <td>{{commit[0].hash.substr(0,6)}}</td>
      <td>{{commit[0].message}}</td>
      <td>
        <p>{{commit[0].parents[0].hash.substr(0,6)}}
          <br>{{commit[0].parents[1].hash.substr(0,6)}}
        </p>
      </td>
      <td>{{commit[0].date}}</td>
      <td>{{commit[0].author.raw}}</td>

    </tr>
  </table>
</body>

</html>

Answer 2

查看您从API中获得的数据，commitsArray应该是一个包含4个属性的对象，pagelen，page，next和{{1 }}。 values是一组提交。所以看来，你正在做的是迭代commitsArray.values的4个属性，并尝试将4个属性中的每一个都视为数组，抓住第一个元素。前3个打印空白，因为它们不是数组。第4行打印第一行。

您实际上并不需要以这种方式引用您的对象。迭代器commitsArray非常智能，可以处理数组而无需按元素位置引用它们。试试这个：

ng-repeat

AngularJS ng-repeat创建三个空行，用于填充表格和表格。 ng-repeat不重复

2 个答案: