我一直在寻找这些问题的解决方案，但 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尝试填充表格时在我的表格中插入三个空白行。我想知道是什么原因造成的以及如何解决它。谢谢。
是什么导致了三个空白行？
这是显示空行和 {{commit[0]}} 中的数据的图像:/image/G69xt.png
解决该问题后，我需要循环遍历提交数组 from i=0 while i <= commit.length (在本例中，api 的第一页有 30 次提交长，但调用 commit.length 不会返回任何内容。
现在我已经确定了 JSON 数组中所有必需信息的位置，如何循环遍历 commit[i]数组来填充表？
我在这里找到的唯一解决方案是编写一个 JS 循环，将所有表 html 解析为字符串，并将其与 id 标签一起插入 html 中。
我相当有信心我只是没有使用 AngularJS ng-repeat正确，它应该为我处理这一切，但文档似乎对我没有多大帮助。任何见解将不胜感激。提前致谢。
最佳答案
查看来自 API 的数据，commitsArray 应该是一个具有 4 个属性的对象:pagelen、page、下一个和值。 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>
关于javascript - AngularJS ng-repeat 在填充表时创建三个空行并且 ng-repeat 不重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30416048/