AngularJS ng-repeat 在用 JSON 数组填充 table 时创建三个空行

Question

我发现这里发布的另外两个问题也遇到了类似的问题，但我相当确定我的问题与标签无关，而是 Angular 中的 ng-repeat 函数的问题。

我正在使用一个循环来创建 HTML 字符串，该字符串可用于填充所有 table 数据。

到目前为止，除一个细节外，一切正常。每次我的循环迭代时，ng-repeat 在显示实际数据之前创建 3 个空行。

这是controller.js

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.commitArray = data;
     });
  }
  $scope.commitsData();
});

这是我的 index.html

<h3>Public activity in battlemidget's python-salesforce repository</h3>

<table id="mytable" 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>
    <div id="tblContents"></div>                   
</table>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    var tbl=$("<table/>").attr("id","mytable");
    var tString = "";
    for (var i = 0; i <= 10; i++) {
        tString += "<tr ng-repeat=\"commit in commitArray\">";
        tString += "<td>{{commit["+i+"].hash.substr(0,6)}}</td>";
        tString += "<td>{{commit["+i+"].message}}</td>";
        tString += "<td>";
            tString += "<p> {{commit["+i+"].parents[0].hash.substr(0,6)}}<br>"
                         + "{{commit["+i+"].parents[1].hash.substr(0,6)}}</p>";
        tString += "</td>";
        tString += "<td>{{commit["+i+"].date.substr(0,10)}}</td>";
        tString += "<td>{{commit["+i+"].author.raw}}</td>";
        tString += "</tr>";
    }
    $("#mytable").append(tString);

</script>

我是 web 开发的新手，这是我的第一个正式项目，其中包含 API，使用 AngularJS 等。抱歉，我在这里做了任何事情反对标准惯例。这是一张图片，显示了我认为 ng-repeat 正在插入的 3 个空行。我想知道是什么原因造成的，我该如何解决。非常感谢。（希望这不是太多代码）。这是显示空行的图像：http://i.stack.imgur.com/Atejf.png

Answer 1

选择 angular 或 jquery，但不能同时选择两者。您在 jquery 中尝试做的事情可以，并且应该以 Angular 的方式完成在 angular 项目中。我完全被你的标题弄糊涂了，因为你说 ng-repeat 但你没有使用 ng-repeat，你使用的是 forloop 和一些巫毒 jquery 魔法。

尝试这样的事情：

var ngApp = angular.module('ng-app', []); ngApp.controller('repoCntrl', function($scope, $http) { $scope.commitArray = []; $scope.commitsData = function(){ //when you get the chance, move this get call to a factory or service $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits') .success(function(data){ $scope.commitArray = data; }); } $scope.commitsData(); });

那么在你看来：

<tr ng-repeat="thing in commitArray"> {{some property of thing, the ith element of commit array}} </tr>

要点是，阅读 ng-repeats。您可以使用它们循环遍历 $scope objects。希望这可以帮助您指明正确的方向。

Answer 2

纯AngularJS解决方案：

var ngApp = angular.module('ng-app', []);
ngApp.controller('repoCntrl', function($scope, $http) {

  $scope.searchFilter = null;
  $scope.commitsArray = [];

  $scope.searchFilter = function(commit) {
    var keyword = new RegExp($scope.commitFilter, 'i');
    return !$scope.commitFilter || keyword.test(commit.hash) || keyword.test(commit.date) || keyword.test(commit.author);
  };

  $scope.commitsData = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
      .success(function(data) {
        $scope.commitsArray = data;
      });
  }
  $scope.commitsData();

  $scope.commitsArray2 = [];
  $scope.commitsData2 = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits/?page=2')
      .success(function(data) {
        $scope.commitsArray2 = data;
      });
  }
  $scope.commitsData2();

  $scope.commitsArray3 = [];
  $scope.commitsData3 = function() {
    $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits/?page=3')
      .success(function(data) {
        $scope.commitsArray3 = data;
      });
  }
  $scope.commitsData3();
});

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

  <label>Search:
    <input type="text" ng-model="commitFilter" placeholder="" />
  </label>
  <br>
  <br>
  <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 | filter: searchFilter">
      <td align="center">{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p align="center" ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td width="100" align="center">{{commit.date.substr(0,10)}}</td>
      <td>{{commit.author.raw}}</td>
    </tr>
    <tr ng-repeat="commit in commitsArray2.values | filter: searchFilter">
      <td align="center">{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p align="center" ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td width="100" align="center">{{commit.date.substr(0,10)}}</td>
      <td>{{commit.author.raw}}</td>
    </tr>
    <tr ng-repeat="commit in commitsArray3.values | filter: searchFilter">
      <td align="center">{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p align="center" ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td width="100" align="center">{{commit.date.substr(0,10)}}</td>
      <td>{{commit.author.raw}}</td>
    </tr>
  </table>
</body>

</html>

理想情况下，这应该自动检查 JSON 数据的其他页面并加载它们，而不使用 http.get

的硬编码页面引用

AngularJS ng-repeat 在用 JSON 数组填充 table 时创建三个空行

AngularJS ng-repeat is creating three empty rows when filling table with JSON array

javascript

arrays

json

angularjs

ng-repeat