AngularJS NG重复创建whien填充表＆放三个空行; NG-不重复重复 [英] AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeating
问题描述
我看过了这些问题的解决方案，但角度很对外语法对我来说，每一个方法似乎做了很多幕后。我是一个福利局web开发，这是我的第一个项目耗时一个API，使用AngularJS，和我刚开始探索的JavaScript。从我的理解，这是我迄今完成。 AngularJS从到位桶API获取JSON数据，角然后创建一个JavaScript对象的数据访问阵列。
这里的controller.js和index.html片段分别是：
VAR ngApp = angular.module（'NG-应用'，[]）;\r
ngApp.controller（'repoCntrl'，函数（$范围，$ HTTP）{\r
$ scope.commitsData =功能（）{\r
$ http.get（'https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits'）\r
.success（功能（数据）{\r
$ scope.commitsArray =数据;\r
}）;\r
}\r
$ scope.commitsData（）;\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML LANG =ENNG-应用=NG-应用＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;标题＆gt;页面标题＆LT; /标题＆GT;\r
＆LT;脚本SRC = HTTPS：//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js>＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =controllers.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=repoCntrl＆GT;\r
＆LT; H3＆GT;公共活动battlemidget的蟒蛇，销售人员库＆LT; / H3 GT＆;\r
＆LT;表边框=1级=表的表条纹＆GT;\r
＆所述; TR＆GT;\r
＆LT;第i提交＆LT; /第i\r
＆LT;第i意见＆LT; /第i\r
＆所述;第i父\r
＆LT; BR＆GT;科（ES）LT; /第i\r
＆LT;第i日期和LT; /第i\r
＆LT;第i个用户名和LT; /第i\r
＆LT; / TR＆GT;\r
＆LT; TR NG重复=犯commitsArray＆GT;\r
\r
＆所述; TD＆GT; {{犯[0] .hash.substr（0,6）}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{犯[0] .message}}＆下; / TD＆GT;\r
＆所述; TD＆GT;\r
＆所述p为H.; {{犯[0]。家长[0] .hash.substr（0,6）}}\r
＆LT; BR＆GT; {{犯[0]。家长[1] .hash.substr（0,6）}}\r
＆所述; / P＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{犯[0] .date}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{犯[0] .author.raw}}＆下; / TD＆GT;\r
\r
＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
我相信 NG-重复是插入三个空白行插入我的表试图填充表时。我想知道是什么原因造成这一点，我怎么能解决这个问题。谢谢。
什么导致了三个空白行？
下面是将图像从显示空行和数据{{提交[0]}} ：的 http://i.stack.imgur.com/G69xt.png
在我解决这个问题我在提交数组需要循环从i = 0，而I＆LT; = commit.length （在这种情况下，页面的API之一在30提交长，但调用 commit.length 不返回任何东西。
现在，我已经确定了所有的JSON阵列所需的信息是，我怎样才能通过提交[I] 数组循环填充表？
我在这里找到的唯一的解决办法是写一个JS循环，分析所有的表HTML为字符串，并在HTML格式的ID标签插入。
我，我只是不使用AngularJS NG-重复正确相当有信心，它应该处理这一切对我来说，但文档似乎并没有是帮助我很多。任何有识之士将AP preciated。先谢谢了。
看着你已经走出了API的数据， commitsArray 应该是一个有4个属性的对象， PAGELEN ，页，接下来和值。 commitsArray.values 是提交的数组。所以它的出现，你在做什么是遍历 commitsArray 的4个属性，并试图对待每4个属性为一个数组，抓住了第一个元素。前3个打印空白，因为它们不是阵列。第四刚打印的第一行。
您实际上并不需要参考你的对象以这种方式。迭代器 NG-重复是足够聪明，处理数组你无须通过元素的位置指给他们。试试这个：
＆LT;表边框=1级=表的表条纹＆GT;
＆所述; TR＆GT;
＆LT;第i提交＆LT; /第i
＆LT;第i意见＆LT; /第i
＆所述;第i父
＆LT; BR＆GT;科（ES）LT; /第i
＆LT;第i日期和LT; /第i
＆LT;第i个用户名和LT; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=犯commitsArray.values＆GT; ＆所述; TD＆GT; {{commit.hash.substr（0,6）}}＆下; / TD＆GT;
＆所述; TD＆GT; {{commit.message}}＆下; / TD＆GT;
＆所述; TD＆GT;
＆LT; p NG重复=父在commit.parents＆GT;
{{parent.hash.substr（0,6）}}
＆所述; / P＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT; {{commit.date}}＆下; / TD＆GT;
＆所述; TD＆GT; {{commit.author.raw}}＆下; / TD＆GT; ＆LT; / TR＆GT;
＆LT; /表＆gt;
第{{commitsArray.page}}，{{commitsArray.pagelen}}提交。
＆下;一个纳克-SRC ={{commitsArray.next}}＆gt;接着页面和下; / A＆GT;
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.
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>
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.
What is causing the three blank rows?
Here's an image displaying the empty rows and the data from {{commit[0]}}: http://i.stack.imgur.com/G69xt.png
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.
Now that I have identified where all the required information in the JSON arrays is, how can I loop through the commit[i] array to populate the table?
The only solution I've found here is to write a JS loop that parses all the table html to a string and insert it with an id tag in the html.
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.
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.
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重复创建whien填充表＆放三个空行; NG-不重复重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
