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

taky2 发表于 Dev

taky2

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

我正在使用循环来创建可用于填充所有表数据的HTML字符串。

到目前为止，除了一个细节之外，它都按预期工作。每当我的循环迭代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开发的新手，这是我第一个认真的项目，其中包含使用AngularJS等API的API。对不起，我在这里做了违反标准约定的任何事情。这是一张显示ng-repeat插入的3空行的图片。我想知道是什么原因造成的，以及如何解决。非常感谢。（希望这不是太多的代码）。这是显示空行的图像：http : //i.stack.imgur.com/Atejf.png

taky2

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