Question

我发现此处发布的其他两个问题遇到了类似的问题，但我相当确定我的问题与标签无关，而是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>

我是网络开发的新手，这是我第一个使用AngularJS等合并API的严肃项目。抱歉，我在这里做过任何违反标准惯例的事情。这是一张图片，显示了我认为ng-repeat正在插入的3个空行。我想知道造成这种情况的原因以及如何解决这个问题。非常感谢。（希望这不是代码太多）。这是显示空行的图片：http://i.stack.imgur.com/Atejf.png

Answer 1

要么选择angular或jquery，要么不选择两者。如果你在一个角度项目中，你在jquery 中尝试做什么，应该以Angular方式完成。我完全被你的头衔搞糊涂了，因为你说ng-repeat但你没有使用ng-repeat，你使用的是forloop和一些voodoo 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对象。希望这有助于指明您正确的方向。

Answer 2

纯AngularJS解决方案：

＆＃13;

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();
});

＆＃13;

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

＆＃13;

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

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

2 个答案: