AngularJS ng-repeat 在填充表时创建三个空行 &ng-repeat 不重复 [英] AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeating
问题描述
我一直在寻找解决这些问题的方法，但 Angular 对我来说是一种非常陌生的语法，而且每种方法似乎都在幕后做了很多工作.我是 Web 开发的新手，这是我使用 AngularJS 使用 API 的第一个项目，我刚刚开始探索 JavaScript.根据我的理解，这是我迄今为止所取得的成就.AngularJS 从 BitBucket API 获取 JSON 数据，然后 Angular 创建一个 JavaScript 对象来访问数据数组.
I've looked for solutions to these problems, but Angular is very foreign syntax for me, and every method seems to do a lot behind the scenes. I'm a newb to web development and this is my first project consuming an API, using AngularJS, and I just started to explore JavaScript. From my understanding, this is what I have accomplished so far. AngularJS gets the JSON data from a BitBucket API, Angular then creates a JavaScript object to access arrays of data.
这里分别是 controller.js 和 index.html 片段:
Here's the controller.js and index.html snippets respectively:
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 在尝试填充表格时在我的表格中插入三个空白行.我想知道是什么导致了这个问题以及我如何解决它.谢谢.
I believe ng-repeat is inserting three blank rows into my table when attempting to populate the table. I would like to know what is causing this and how I can fix it. Thanks.
是什么导致了三个空白行?这是一张显示空行和来自 {{commit[0]}} 的数据的图像: http://i.stack.imgur.com/G69xt.png
一旦我解决了这个问题，我需要遍历提交数组 from i=0 while i <= commit.length(在这种情况下，api 的第一个页面是 30 个提交，但是调用 commit.length 没有返回任何东西.
Once I solve that issue I need to loop through the commit array from i=0 while i <= commit.length (in this case page one of the api is 30 commits long, but calling commit.length is not returning anything.
既然我已经确定了 JSON 数组中所有必需信息的位置，我该如何循环遍历 commit[i] 数组以填充表?我在这里找到的唯一解决方案是编写一个 JS 循环，将所有表格 html 解析为一个字符串，并在 html 中插入一个带有 id 标记的字符串.
我相当有信心我只是没有正确使用 AngularJS ng-repeat，它应该为我处理这一切，但文档似乎对我帮助不大.任何见解将不胜感激.提前致谢.
I'm fairly confident I'm just not using the AngularJS ng-repeat correctly and it should handle this all for me, but the documentation doesn't seem to be helping me much. Any insight would be appreciated. Thanks in advance.
推荐答案
看看你从 API 出来的数据，commitsArray 应该是一个有 4 个属性的对象，pagelen、page、next 和 values.commitsArray.values 是一个提交数组.所以看起来，您正在做的是迭代 commitsArray 的 4 个属性，并尝试将这 4 个属性中的每一个都视为一个数组，获取第一个元素.前 3 个打印空白，因为它们不是数组.第 4 行只打印第一行.
Looking at the data you have coming out of the API, commitsArray should be an object with 4 properties, pagelen, page, next, and values. commitsArray.values is an array of commits. So it appears, what you are doing is iterating over the 4 properties of commitsArray, and trying to treat each of the 4 properties as an array, grabbing the first element. The first 3 print blank, because they are not an array. The 4th prints just the first row.
您实际上不需要以这种方式引用您的对象.迭代器 ng-repeat 足够智能，可以处理数组，而无需按元素位置引用它们.试试这个:
You don't actually need to refer to your objects in that manner. The iterator ng-repeat is smart enough to handle arrays without you needing to refer to them by element position. Try this instead:
<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>
这篇关于AngularJS ng-repeat 在填充表时创建三个空行 &ng-repeat 不重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
