AngularJS ng-repeat 在填充时创建三个空行 table & ng-repeat 不重复

Question

我一直在寻找这些问题的解决方案，但 Angular 对我来说是非常陌生的语法，而且每种方法似乎都在幕后做了很多事情。我是 Web 开发的新手，这是我第一个使用 API、使用 AngularJS 的项目，我刚刚开始探索 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 在尝试填充 table 时 在我的 table 中插入三个空行。我想知道是什么原因造成的，我该如何解决。谢谢。

三个空白行是什么原因造成的？ 这是一张显示空行和来自 {{commit[0]}} 的数据的图像： http://i.stack.imgur.com/G69xt.png

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

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

我相当有信心我只是没有正确使用 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，以及 values。 commitsArray.values 是一个提交数组。如此看来，您正在做的是迭代 commitsArray 的 4 个属性，并尝试将 4 个属性中的每一个都视为一个数组，并获取第一个元素。前 3 个打印空白，因为它们不是数组。第 4 个只打印第一行。

您实际上不需要以那种方式引用您的对象。迭代器 ng-repeat 足够聪明，可以处理数组而无需按元素位置引用它们。试试这个：

<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.values">

      <td>{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td>{{commit.date}}</td>
      <td>{{commit.author.raw}}</td>

    </tr>
</table>
Page {{commitsArray.page}}, {{commitsArray.pagelen}} commits.
<a ng-src="{{commitsArray.next}}">Next Page</a>

AngularJS ng-repeat 在填充时创建三个空行 table & ng-repeat 不重复

AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeating

javascript

arrays

json

angularjs

ng-repeat