在ng- AngularJS循环中重复ng-repeat是无限的
在ng-AngularJS循环中重复ng-repeat是无限的，这是因为ng-repeat指令会根据指定的数据集合来生成重复的HTML元素。如果在ng-repeat中嵌套了另一个ng-repeat，而且内部的ng-repeat没有指定合适的条件来终止循环，就会导致无限重复。
解决这个问题的方法有两种：
- 确保内部的ng-repeat有合适的条件来终止循环。可以通过使用ng-if指令或者在ng-repeat中添加过滤器来实现。例如，可以使用ng-if来判断是否满足某个条件，如果不满足则不再重复。
- 使用track by语法来追踪每个重复项的唯一标识。在ng-repeat中添加track by表达式可以帮助AngularJS跟踪每个重复项的唯一标识，从而避免无限重复。例如，可以使用track by $index来追踪每个重复项的索引。
这样，我们就可以避免在ng-AngularJS循环中重复ng-repeat无限循环的问题。
关于AngularJS的ng-repeat指令，它是AngularJS中用于循环遍历数据集合并生成重复HTML元素的指令。ng-repeat可以用于任何可迭代的数据集合，如数组、对象等。它的语法如下：
<div ng-repeat="item in items">
{{ item }}
</div>其中，"item in items"表示将items数组中的每个元素赋值给item，并生成重复的div元素。在ng-repeat中可以使用特殊变量$index来获取当前重复项的索引。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）是一种弹性计算服务，提供安全可靠、弹性扩展的云端计算能力。您可以根据业务需求选择不同配置的云服务器实例，并通过腾讯云控制台或API进行管理和操作。了解更多信息，请访问腾讯云云服务器产品介绍页面：https://cloud.tencent.com/product/cvm
相关·内容
我使用的是ng-repeat指令和ng-repeat-start/ng-repeat-end选项。同样在主循环中，我有另一个内部ng-repeat。但问题是，我的外部ng-repeat-start声明仅用于声明循环，实际上，我不需要重复声明在其中声明的HTML元素。见下面的例子：
<tbody>
<tr ng-repeat-start="anArray in arrayOfArrays"> <!-- HOW TO REMOVE THIS EMPTY <tr>? -->
</tr>
<
浏览 0提问于2014-08-03得票数 1
回答已采纳
4回答
我试图从url中读取json数据，但它不起作用。
(如果chrome不工作，在firefox中打开它)。
这是我的javascript代码：
$scope.displayA = function() {
$http.get('url').then(function(response){
$scope.ninjass = response.data;
});
};
我正在尝试以ng-重复格式显示它，但没有显示任何内容。
ng-重复代码
<table>
<!-- <th ng-repeat="ninja in
浏览 2提问于2018-09-26得票数 0
我试图找出当模型在指令中被更新时，我可以如何倾听。
eventEditor.directive('myAmount',function(){
return {
restrict: 'A',
link: function(scope, elem, attrs) {
scope.$watch(attr['ngModel'], function (v) {
console.log('value changed, new value is: ' + v);
浏览 8提问于2014-09-16得票数 15
回答已采纳
1回答
我在安古拉发现了一些奇怪的行为。我的指令简单地向dom元素添加和编译ng-repeat。但是，范围变量item是不可访问的。有关解释，请参阅下面的代码。
var demo = angular.module('demo', []);
demo.directive('customRepeat', function($compile) {
return {
priority: 2000,
restrict: 'A',
compile: function(element){
element.
浏览 6提问于2017-01-24得票数 2
回答已采纳
2回答
现在，我在Python和前端Angularjs中工作。我正在使用JSON对象获取数据。现在我想在我的ng-重复中使用那个JSON对象。下面是我的代码：-
可以这样用吗？？
{{result['products']}}
<div ng-repeat="choice in {{result['products']}}" >
<label>
<input type="radio" name="choice" ng-model="" va
浏览 5提问于2014-07-24得票数 1
回答已采纳
5回答
我试图在一个固定宽度的容器中输出html锚。当使用角的ng-重复链接溢出外的容器。下面是ng-重复的代码片段.有关溢出的示例，请参阅jsfiddle。
<div style="width: 200px; padding: 5px; border: solid 3px #000;">
<a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}</a>
</div>
浏览 1提问于2014-11-12得票数 2
回答已采纳
5回答
我有两个ng-重复的儿童和家长div如下所示
<div ng-repeat="stage in stages">
<div ng-repeat="step in steps">
<button ng-click="clickedStageAndStep($index)">
</div>
</div>
$scope.clickedStageAndStep = function(index) {
console.log("Step Index: " +
浏览 11提问于2016-05-23得票数 8
回答已采纳
2回答
我有嵌套数组，所以我不得不使用3次ng-重复。
<div ng-repeat = "cat in cats" >
<div ng-repeat = "kitty in cat " >
<button ng-click="delete($index)">Delete</button>
</div>
</div>
</div>
所以我的问题是我无法访问第二次重复的$index，有
浏览 5提问于2014-07-30得票数 0
回答已采纳
我有这样的代码：
<ul ng-repeat="codes in response">
<li ng-if="((codes.branch == formData.branches.alias) && (codes.taken == 0))">
<strong>{{codes.id}}</strong>
{{codes.code}}
</li>
</ul>
这将检查代码是否从数据库中提取。否则，它将显示在这里。我现在要做的是随机化那些尚未被接受的代码
浏览 1提问于2015-05-08得票数 0
我有一个弹出显示项目与ng-重复，但在ng-重复的链接不起作用，两种方法。以下是html代码
<div class="skills-container">
<i class="fa fa-tags"></i>
<button type="button" class="btn btn-sm btn-primary skills" ng-repeat="skill in work.skills" ng-Mouseover="getSimilar($index
浏览 9提问于2014-04-29得票数 0
回答已采纳
1回答
我希望在下面的categoryAlpha +AngularJS中将categoryBeta转换为不同的值(例如，转换为AngularJS)：
<div ng-repeat="x in categoryAlpha | limitTo:quantity">
<previews></previews>
<hr />
</div>
因为ng-重复不是一个正常的属性，所以我认为我无法通过jQuery attr()来改变它。是我唯一的解决方案regex，还是有一个角/jQuery方法可以更改值categoryAlp
浏览 5提问于2015-05-29得票数 2
回答已采纳
我在我的网站上使用angularjs 4.2。
我可以通过使用指令来检测ng-repeat何时完成重复，但是现在如果我在ng-repeat中使用ng- repeat，我无法从repeat外部获得范围来检查$last。
关于这个问题的任何想法。
浏览 0提问于2016-04-19得票数 0
3回答
有没有针对AngularJS的本机拖放解决方案，可以处理嵌套的ng重复之间的拖放？
当前的html是什么样子的：
<section ng-repeat="list in lists">
{{ list.name }}
<article ng-repeat="user in list.users">
{{ user.name }}
</article>
</section>
我想要实现的是，我可以将用户移动到其他列表。
我不想添加jQuery UI作为拖放的依赖项。
浏览 2提问于2014-02-14得票数 3
我仍然在学习AngularJs，我遇到了一个我似乎找不到答案的情况(虽然我已经找到了很多关于subject...nothing的答案，就像我所需要的一样)。
我有下面的纳克模型在里面重复。这一切都很好：
<tr ng-repeat="option in orderLine.options">
<td>
<input ng-change="updateOptionsTotal(option.price)" ng-model="option.price" value="{{ option.pri
浏览 1提问于2018-02-05得票数 1
回答已采纳
我试图使用ng类设置tr的类，其值为ng-重复。我在网上看到的所有例子似乎都调用了一个函数。我可以用值来设置ng类，而不是使用函数吗？
这些都不管用。
<tr ng-class="{{res.resopnse.label}}" ng-repeat="res in responses">
<tr ng-class="res.resopnse.label" ng-repeat="res in responses">
<tr ng-class="{res.resopnse.label}" n
浏览 1提问于2013-11-21得票数 1
回答已采纳
用安古拉杰我不能重复。首先，ng-重复工作很好，其次不是很好。
Html代码
<div class="col-xs-12" ng-app="myAns" ng-controller="myCtrl">
<table class="table">
<tr><td ng-repeat="fullname in team1_name">{{fullname}}</td></tr>
<tr><td ng-repeat="
浏览 0提问于2016-12-12得票数 1
回答已采纳
编辑--这是的类似(或重复)
-
我有一个表，它的行是通过ng-重复生成的：
<tr ng-repeat="(key, value) in rows">
<td>{{a}}</td>
<td>{{b}}</td>
</tr>
出于各种原因，我更愿意把它保存在标签中，而不是几个内联块中。
如何在每行的下方添加另一行，例如伪代码
[ somehow-repeat ng-repeat="(key, value) in rows"]
<tr class="1&
浏览 1提问于2014-03-14得票数 4
回答已采纳
我需要创建动态ng-重复，填充之后，我想在每个重复项上添加一个单击函数，然后单击，我想在单击的元素中添加另一个重复。这是为了创建一个小文件管理器，所以在文件夹上单击我想要添加一个文件列表(
<li class="item_grid" ng-repeat="(id,f) in files | filter:query" id="{{f.id}}" file-directive-right>
<div class="title" ng-click="clicked(id)">{{f.id}}
浏览 1提问于2015-01-21得票数 1
回答已采纳
1回答
前言：
<input type="tel" ng-model="people" placeholder="6" maxlength="2">
</label>
<ion-item>
{{people}}
<i class="ion-man icon-large paddin
浏览 3提问于2014-04-23得票数 0
回答已采纳
角码：
$scope.qA = [ { question : ' question 1', answer: ['answer 1-1', 'answer1-2']},
{ question : ' question 2', answer: ['answer 2-1', 'answer2-2']}];
HTML(翡翠)代码
h1(ng-repeat='ques in qA.question') {{ques}}
p(ng-repeat='ans i
浏览 3提问于2013-09-23得票数 1
回答已采纳
有什么方法可以得到纳-重复当前记录索引吗？我试图给每个记录div一个等于记录索引示例的id：
<div id="1">
<div id="2">
<div id="3">
任何一个例子都会受到高度重视。
我正在使用的ng-重复如下：
<div ng-repeat="rows in clients.Result">
浏览 4提问于2014-04-25得票数 0
回答已采纳
在大多数情况下，我对角和javascript都很陌生，所以这可能是一个普遍的javascript问题：
我有一个通过ng-重复创建的div列表，每个div包含一个ng-if=“展开的== true”，通过单击一个按钮并运行下面的函数使其变为真。
如果在该div中，如何将ng-if值更改为仅针对特定ng的值？当前设置的更改扩展为相等的true，然后显示所有ng-if材料。
//HTML
<div class="panel-body">
<span ng-if="expanded == false">This pro
浏览 5提问于2014-02-02得票数 3
我环顾四周，发现了与我相似的问题，但情况并非如此。这可能是一个真实的努比问题，但我不知道如何做到这一点。我使用ng重复显示4个复选框，如下所示：
<tr ng-repeat="type in dataType">
<td><checkbox ng-model="type.checked"></checkbox> {{type.name}}</td>
</tr>
这使我在一行中有4个复选框。但是我想要的是前两个复选框并排在一起。所以2xTd在1tr内。但是，当我将代码更改为
<tr
浏览 2提问于2015-06-11得票数 2
回答已采纳
我的AngularJS应用程序视图大量使用ng-重复指令。它是这样做的：
<div ng-repeat="branches in company">
<p>{{branches.name}}</p>
<p>{{branches.location}}</p>
<div>
<select ng-model="branches.officeInformationType">
<option ng-repeat=
浏览 4提问于2017-05-18得票数 1
回答已采纳
1回答
我希望使用自定义指令创建类似于下面的内容。我可以得到“类别”部分，而不是“面包屑”部分。
在面包屑指令中使用ng-重复，不起作用。
我可以观察到面包屑的ul，但是li元素没有附加到ul中。
下面是我的小提琴，出于某种原因，代码在我这边不起作用。但我把它放在这里只是为了给出一些想法。
<div ng-controller="sampleCtrl">
<tree src="categories"></tree>
</div>
树指令在单击时调用分支。分支点击调用“面包屑”
ng-重复不起作用：
tem
浏览 3提问于2016-03-06得票数 0
回答已采纳
我正在呈现键:使用ng-重复的值对象数组，如下所示：
<div ng-controller="mainCtrl">
<div ng-repeat="record in records">
<div ng-repeat="(key, value) in record">
<input ng-model="key" />: <input ng-model="value" />
</div>
</
浏览 4提问于2013-05-11得票数 10
回答已采纳
1回答
我试图用AngularJS和ng-重复创建下表结构(示例1)。我唯一的要求是tbody不会被重复。我正在处理的数据具有product.productunit的结构。具有rowspan=3的左表单元格将显示图像，后面的右3单元将显示该图像的产品单元。然后，整个表将被放置在一个固定的可滚动网格中，并使用css: tbody {overflow:涡旋}使用固定的标头/页脚。不幸的是，在每个产品之间有多个tbodys，分割成一个表，滚动，如例2所示，这是不工作的。
更新
我的问题是如何删除tbody中的ng-重复。下面的人对我的问题投了反对票，因为我的例子显示了与tbody一起的ng-重复。我询问如何
浏览 3提问于2014-03-10得票数 2
我在试着上传和显示图像在ng-重复。
我成功地使用jquery函数上传和显示图像，而不用ng-重复：
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<input type='file' />
<img id="myImg" ng-src="#" alt="your image&#
浏览 3提问于2014-10-08得票数 0
回答已采纳
是否有办法键入：
<div ng-repeat="item in items | limitTo:what">
在这里，我可以用一些东西来替换“什么”，这会使它在整个项目列表中迭代。(注意，items.length不是我要找的..。或者，它必须与一些丑陋，如果在html中)。
浏览 6提问于2014-12-17得票数 1
回答已采纳
根据当前索引，在ng-重复中更改HTML的最佳方法是什么？我想输出两个div垂直填充容器，而第三个div将填充一半，在第四个div上面填充另一半。重复下一个元素。下面的图像中的示例：
我想通过执行$index来增加ng-repeat中的{{$index = $index + 1}}，在ng中计算$index，看看它是否是所需的值。但是我不能这样增加索引(当我打印它时，它显示为33，34，35.等)。提前谢谢。
编辑：
照目前的情况，我忘了加一个小细节。数字3和4，或7和8需要打印在同一个ng-重复。这是一个旋转木马(Slick)，而那些半div需要在同样的“幻灯片”中的旋转木马。唯一
浏览 2提问于2015-05-27得票数 2
回答已采纳
1回答
AngularJS嵌套ng-重复
、、、、
我有一个包含问题和选择列表的对象。我使用嵌套的ng重复在页面上显示这个对象。当我试图改变‘问题’时，一切都变的很好，但当我试图改变‘选择’时，什么都没有发生。问题出在哪里？
我的页面：
<div class="panel">
<div class="row">
<div class="large-12 columns">
<h3>{{ title }}</h3>
<ol>
<li n
浏览 3提问于2014-12-01得票数 0
回答已采纳
在AngularJS中迭代数组(列表)有一个严重的问题。
数组的结构是->项{ var1、var2、array2var3、var4 }。
我想在带有ng-重复的表中的HTML页面上显示这个数组，如下所示：
<tr ng-repeat="item in items">
<td >{{item.var1}}</td>
<td >{{item.var2}}</td>
<td ng-repeat="...">###</td>
</tr>
在"#
浏览 0提问于2014-11-08得票数 1
回答已采纳
3回答
两次重复都不起作用。但是仅仅显示{{行}确实有效。因此，模板与控制器之间的通信是有效的。
我的ng-repeat怎么了
我已经搜索了关于这个主题的其他帖子，但是在所有这些帖子中，错误都在控制器中。但是，即使在HTML模板中定义的数组中重复I也不起作用。当不循环的时候，行就会出现。
<div ng-controller="OrderNewCtrl">
<h1> {{ rows }}</h1>
<div ng-repeat="i in [42, 42, 43, 43]">
{{ i }}
&l
浏览 5提问于2017-04-04得票数 1
回答已采纳
我试着用ng-重复生成表单输入。注意：'customFields‘是一个字段名数组：“年龄”、“体重”、“种族”。
<div class="control-group" ng-repeat="field in customFields">
<label class="control-label">{{field}}</label>
<div class="controls">
<input type="text" ng-m
浏览 8提问于2013-07-25得票数 23
回答已采纳
1回答
我正在尝试理解angularJs的动态浮动按钮实现(mfb-指令)。在试图理解这些问题的同时，我无法理解这些问题。
第1期：
无法使用ng的单次迭代来形成菜单--重复，同时尝试从JSON动态填充4个按钮(ButtonMenu +3按钮)，我需要运行ng-重复两次来形成菜单。
<nav ng-if="$first" mfb-menu position="bl" effect="zoomin" label="{{menu.name}}" ng-repeat="menu in menus">
<
浏览 5提问于2017-11-29得票数 0
我目前正在开发一个AngularJS web应用程序。
我想要达到的目标：
使用ng-重复和删除空值在一个列表中列出两组数组。
e.g
值1A，值1B，值2A，值2B
当前问题：
当使用ng-重复时，它保持显示数组集["Value One A",null,null,null,"Value Two A"] & ["Value One B",null,null, null,"Value Two B"]，而不是列出单独的值。
任何帮助/建议都是有帮助的！
阵列：
[["Value One A",null,null
浏览 5提问于2015-08-14得票数 1
回答已采纳
3回答
我试图在嵌套的ng-重复循环中更新父作用域，但它不起作用！我已经用了两个小时了！
这是我的嵌套循环：
<div ng-repeat="input in config" style="border: 1px solid #000;">
<div ng-repeat="inputProperty in input.inputStyle" style="border: 1px solid #000;">
<input type="text" style="{
浏览 6提问于2014-08-18得票数 0
回答已采纳
我有一个关于filter的问题要搜索示例名称。这很容易在ng-重复上实现。
我遇到的问题实际上是我想要基于name或account_name(两个不同的实体)进行过滤。
我尝试的是在name和account_name上设置输入框过滤器，但没有成功。我所做的是：
<input type="text" placeholder="Search" ng-model="searchName.name">
<md-card flex="45" flex-sm="100" flex-md="100&#
浏览 3提问于2018-01-02得票数 1
回答已采纳
我遇到了一个奇怪的问题:我的搜索表单向我的服务器启动了三个不同的请求，但是当角必须经常显示数据时，数据就不会出现。我确信数据来自服务器，因为我在FireBug中看到了这些数据。所有的请求都是sended...but，我认为不是所有的请求都是由angularJS处理的。也许我弄错了它的用途。
这里我的代码：
$scope.queryUser = {};
$scope.index = ['central', 'distributed', 'other'];
//$scope.index = ['distributed'
浏览 2提问于2013-12-12得票数 2
回答已采纳
我有一个复选框(绑定到一个模型)，放在一个ng-repeat标记中，该标记遍历一个列表。
我希望通过使用ng-true-value和ng-false-value属性将一个值“是”或“否”发送给控制器，这取决于是否选中了该框。
但是由于某种原因，$scope.value2没有在控制器中得到更新。
下面是一个jsFiddle，我的问题是：：
注意:如果我将复选框放置在ng-重复标记之外，将正确地将YES/NO值发送给控制器。
如果我将值放置在ng-重复标签中，如何将值发送到复选框单击的值到控制器？
谢谢!
浏览 3提问于2013-08-14得票数 1
回答已采纳
我使用AngularJS ng-重复以查看我的表元素(它不应该经常使用-我知道-但我不知道如何用其他方式)
这里我的例子是如何在表中显示containerObjects：
ng-repeat=...
我有很多containedObjects (包括start、end和containerType) (大约每页600 )，如表所示。花了大约3秒的时间才展示了这幅景象。
我现在的问题是，是否可以改进一些东西以提高性能。是否有可能替换/更改ng-重复以减少加载时间。
非常感谢!
编辑
我也有这个函数调用，但是我不知道如何防止函数调用。有没有人知道我能怎么改进这个？非常感谢！
ng-repeat=&#
浏览 2提问于2015-09-16得票数 3
回答已采纳
我不知道发生了什么事，因为某种原因，AngularJS表现得很古怪：
<p ng-repeat="item in supplierTeamObjects">
<a href="#" ng-click="selectSupplierTeam(item.id)">[[item.name]]</a>
</p>
^--NG-REPEATS PERFECTLY
<br>
<div ng-ini
浏览 1提问于2014-09-04得票数 0
回答已采纳
我基本想做的事情如下：
我有两列，我想用一个ng-repeat来填充数据，但不想重复列本身。我认为这可能是不可能的，但我必须尝试:)
->Start ng-repeat="item in items"
<div exclude-from-repeat class="col1"> -> append {{item.Name}} here </div>
<div exclude-from-repeat class="col2"> -> append {{item.Description}} her
浏览 0提问于2015-01-24得票数 2
我有这部分代码在ng-重复：
<div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div>
其中参数是某个$scope字符串变量..。
我想看看是否有可能检查参数是否包含一个子字符串(例如在ng-show中)。
你可以这样做：
<div ng-show="parameter.indexOf('TEST') != -1">{{parameter}}</div>
它似乎正在工作；它显示每个包含'TEST‘关键字的参数。
浏览 4提问于2014-02-18得票数 1
回答已采纳
我有以下数组：
var date = {
'2015': [{
'month': 'Januar',
'day': 31
}, {
'month': 'Februar',
'day': 28
}]
};
我想重复一遍等于天数：
所需产出：
<div ng-repeat="date in date.2015">
{{date.month}}
<!-- Displays 12 mont
浏览 2提问于2015-02-21得票数 3
回答已采纳
3回答
我使用ng-重复在HTML上生成表行。我的行内容中有HTML标记，我想格式化内容with.But，它只会将带有html标记的文本打印为纯文本，而不会将它们标识为HTML。
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td>{{styleRowDetail.shortMessage}}
</td>
<td>{{styleRowDetail.classOriginated}}
</td>
<td>{{styleRowDetai
浏览 4提问于2016-06-12得票数 0
回答已采纳
1回答
我使用AngularJS，使用ng-重复来呈现一个属性列表，它是通过json获取的。我还对清单进行了分页，所以当您单击第2页(例如，应用程序进行JSON调用)时，将获得新的列表数据，然后由ng-重复重新呈现。
我的问题是，当ng-重复重新加载/重新还原器时，如何捕获，以便显示加载gif？
$scope.listings = [ { 'title':'listing 1' },{ 'title':'listing 2' }, etc.. ];
<div class="listing" ng-repeat=&
浏览 4提问于2014-03-23得票数 1
回答已采纳
这是个菜鸟问题。我正在寻找一种正确的方法来访问嵌套ng-重复指令中的父作用域。这正是我的意思：
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="section in sections">
{{section.Name}}
<div ng-repeat="item in section.Items" ng-init="parent = section">
浏览 2提问于2015-09-24得票数 1
回答已采纳
我以以下方式创建了Javascript对象：
$scope.initNews = function () {
for (var i = 2013; i > 2000; i--) {
$scope.news[i] = {};
$scope.news[i]["year"] = Number(i);
for (var j = 1; j <= 12; j++) {
$scope.news[i][j] = {};
$scope.news[i][j]["month&#
浏览 1提问于2013-07-30得票数 0
回答已采纳
2回答
我想使用ng-repeat创建一个高分列表。
玩家列表看起来如下：
[
{name: 'anton', score: 32},
{name: 'rolf', score: 3},
{name: 'max', score: 12},
{name: 'mike', score: 49},
{name: 'john', score: 25},
{name: 'rui', score: 5},
{name: 'wolle', score: 6},
{name:
浏览 3提问于2015-11-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
