AngularJS ng-repeat 在填充表和 ng-repeat 不重复时创建三个空行答案

【问题标题】：AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeatingAngularJS ng-repeat 在填充表和 ng-repeat 不重复时创建三个空行
【发布时间】：2015-05-23 18:12:18
【问题描述】：

我一直在寻找这些问题的解决方案，但是 Angular 对我来说是非常陌生的语法，而且每个方法似乎都在幕后做了很多事情。我是 web 开发的新手，这是我第一个使用 API 的项目，使用 AngularJS，我刚刚开始探索 JavaScript。据我了解，这就是我迄今为止所取得的成就。 AngularJS 从 BitBucket API 获取 JSON 数据，然后 Angular 创建一个 JavaScript 对象来访问数据数组。

这里分别是controller.js和index.html sn-ps：

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，它应该为我处理这一切，但文档似乎对我没有多大帮助。任何见解将不胜感激。提前致谢。

【问题讨论】：

根据此代码，您在此处尝试执行的操作有点难以理解。您是否从您的 API 接收到一个充满数组的数组？您正在使用中继器重复commitsArray，并且对于每次迭代，您都试图获取第一个元素，就好像每次迭代本身就是一个数组一样。你能发布一个commitsArray 实际包含在服务器上的样本吗？很少有必要在像这样的 ng-repeat 中使用括号语法....
是的，括号语法完全没有必要。再次感谢您的帮助！

标签： javascript arrays json angularjs ng-repeat

【解决方案1】：

查看来自 API 的数据，commitsArray 应该是具有 4 个属性的对象，pagelen、page、next 和 values。 commitsArray.values 是一个提交数组。所以看起来，你正在做的是迭代commitsArray 的 4 个属性，并尝试将 4 个属性中的每一个都视为一个数组，并获取第一个元素。前 3 个打印空白，因为它们不是数组。第四行只打印第一行。

您实际上不需要以这种方式引用您的对象。迭代器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>

【讨论】：

注意我添加了最后一点来展示如何利用来自 API 的其他元素；特别是，<a> 标签只是为了表明数据正在被正确解析。您需要将该变量合并到您的调用服务中以进行实际分页。
哇，我不敢相信我没有尝试过！谢谢@克莱斯！喜欢最后一点。
angular 实际上比乍看起来更简单。有时最简单的想法效果最好，但需要一点时间才能意识到你拥有如此强大的力量。 :)

【解决方案2】：

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

【讨论】：