需要使用ng-repeat减少Angularjs中的HTML
在AngularJS中，ng-repeat是一个指令，用于在HTML模板中重复渲染相同的元素或组件。它可以用于循环遍历数组或对象，并为每个元素生成相应的HTML代码。
ng-repeat的语法如下：
<div ng-repeat="item in items">
{{ item }}
</div>其中，"item in items"表示遍历名为items的数组或对象，并将每个元素赋值给名为item的变量。在循环体内部，可以使用{{ item }}来显示当前元素的值。
ng-repeat的优势包括：
- 简化HTML模板：通过ng-repeat，可以避免手动编写重复的HTML代码，提高开发效率。
- 动态更新：当数组或对象发生变化时，ng-repeat会自动更新DOM，保持视图与数据的同步。
- 灵活性：ng-repeat支持对数组、对象的多种遍历方式，如按索引、按键值等。
应用场景：
- 列表展示：ng-repeat常用于展示列表数据，如新闻列表、商品列表等。
- 动态表单：通过ng-repeat可以动态生成表单元素，根据数据的变化自动生成表单字段。
- 多语言支持：可以利用ng-repeat来实现多语言的切换，根据语言数据动态生成对应的文本。
腾讯云相关产品推荐： 腾讯云提供了丰富的云计算产品，以下是一些与AngularJS开发相关的产品：
- 云服务器CVM：提供可扩展的虚拟服务器，适用于部署AngularJS应用程序。产品介绍链接
- 云数据库MySQL：可靠、高性能的关系型数据库服务，适用于存储AngularJS应用程序的数据。产品介绍链接
- 云存储COS：安全、稳定的对象存储服务，适用于存储AngularJS应用程序的静态资源。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
1回答
我有动态面包屑数据。我在DOM中绑定了ng-重复：
<ul>
<li class="list-item" ng-repeat="breadCrumb in breadCrumbs">
<a href="javascript:void(0);">{{ breadCrumb.name }}</a>
</li>
</ul>
我想计算每一个重复的ul宽度，并与容器的宽度进行比较。如果容器宽度小于ul宽度，则要添加所有以前的li元素隐藏类。
例如：
[
浏览 4提问于2015-11-27得票数 1
回答已采纳
1回答
我试图使用ng-重复和ng-模型来填充数组。数组中所需元素的数量来自select元素。
我的主计长的相关部分：
app.controller('AddMsgCtrl', function($scope){
$scope.range = function(n){
var array = [];
for(var i = 0 ; i < n ; i++)
array.push(i);
return array;
};
$scope.images = ['1.gif'
浏览 4提问于2015-06-04得票数 0
回答已采纳
1回答
我目前正在为一个相当复杂的报告构建一个表格。它正在工作，但是性能很差，构建表需要4-5s.。
表的requirements如下所示：
表的列是动态确定的。首先是一组固定的列，然后是一个动态部分，然后是另一个固定集。
还动态地确定每个单元的内容。这不仅意味着单元格的数据发生了变化，而且它的显示方式也发生了变化。有些单元格只输出值，有些单元格提供输入等。
当前解决方案的工作原理大致如下：
列定义被构建并加载到表的scope中。
对每一行调用ng-repeat，然后对每一列调用
在每个单元格中，我调用一个特殊指令来显示该单元格，该单元格会编译另一个指令。
这
浏览 0提问于2015-02-24得票数 0
2回答
我有一个从A到Z按字母顺序列出的人.例如，每个人，A先生，都有一组相应的数据Histories。
我有一个带有简单ng-repeat的表，它显示12个单元格(代表12个月)的数据。
如果提供了12个月/单元格值的数据，我将显示所有数据，如果只提供5个月的数据(任何小于12的数据)，则调用计算剩余单元格并以更深颜色显示的服务srvEmptyCells。
问题是，我注意到我在重复ng重复：
emptyCell in getEmptyCells
许多次，这是影响页面性能，因为我有100多个用户。
是否有办法为每个特定用户保存空单元格的数量？并消除额外ng-repeats的需要？指令会改善情况吗？
下
浏览 3提问于2014-10-28得票数 0
关于Angular JS中的性能的快速问题。
我有一个ng-repeat列表列出了大量的搜索结果。我使用指令/模板来提取每个搜索项。
是使用一个ng-if语句包装两个指令，还是使用一个指令并在其中包含多个ng-if语句，并使用表达式或语句。
例如，包含两个指令的Ng-if语句：
<div ng-repeat>
<directive-1 ng-if="this"></directive-1>
<directive-2 ng-if="that"></directive-2>
</div
浏览 0提问于2016-07-25得票数 1
2回答
我试图迭代给定的JSONObject，其中包含JSONArray，并在html中显示。下面是一个例子：
jsonData:
{
"category1": [
{
"name": "Some title",
"desc": "And its description"
},
{
"name": "Another title here",
浏览 0提问于2018-09-19得票数 0
回答已采纳
1回答
使用ng-repeat将作用域变量传递给指令模板的正确方法是什么？我正在尝试迭代一个数据数组，以呈现一些包含templateUrls的"app“元素。如果我没有在指令中设置scope : true，那么模板变量就是空的。将ng-repeat中定义的vars传递给模板而不污染作用域的正确方法是什么？
// controller
userApp.controller('mainController', ['$scope', 'mainFactory', 'credsFactory',
function($scope, main
浏览 2提问于2014-12-06得票数 0
如何在angularjs中添加新行。我的控制器中有这样的代码：
$scope.newLine = '<br>';
$scope.getID =funtion(number){
for( var key in $scope.myData){
var obj = $scope.myData[key];
if(obj['seat_no'] == number){
return obj['passenger_name'] + $scope.newLine + obj['tic
浏览 3提问于2015-02-06得票数 0
回答已采纳
1回答
我曾经查找过关于如何在angularJS中呈现html标签的类似问题，但没有一个对我有效，因为我使用的是ng-repeat。任何人都有任何建议。
<div ng-repeat="o in SurveyResults.SurveyQuestions">
{{o.SurveyQuestionId}}
{{o.QuestionText}}
</div>
我的o.QuestionText有像<b>How well do we deliver on ou
浏览 0提问于2016-03-02得票数 0
1回答
我正试着制定一个时间表。从API中收到的对象如下：
schedule : {
id,
name,
shifts : []
}
// each shift is
shift : {
id,
schedule_id,
user,
tasks: []
}
// each task is
task: {
id,
shift_id,
time_start,
time_end
}
我的HTML当前是(请看下面的图片，了解它现在的样子)
<div class="schedule">
浏览 4提问于2014-07-16得票数 0
回答已采纳
6回答
我想要达到的目标：
列出数组中的每个值，而不显示空(空)值。
例如，项目1，项目1，项目2
当前的问题：我尝试了几个过滤器来完成这个任务，但是我不能删除空的列表项(见图表)。
预先感谢您的任何帮助/帮助。
控制器JS:
$scope.array = ["Item #1","Item #1","","","","Item #2"];
HTML:
<md-list>
<md-list-item class="md-3-line" ng-repeat="i
浏览 1提问于2015-08-18得票数 7
回答已采纳
在我的视图表单中，我有以下表代码：
<table class ="table table-bordered">
<colgroup span="7"></colgroup>
<tbody>
<tr ng-repeat="tr in rows">
<td ng-repeat="td in tr track by $index">
<span ng-bind-html="td"></span>
浏览 1提问于2015-02-11得票数 3
回答已采纳
我正在使用ng-include加载大量数据。
我想知道是否有一种方法可以知道模板何时被“呈现”，因为有时它似乎被“冻结”了，因为我想做一个“加载屏幕”或其他什么。
谢谢。
下面是代码
控制器代码：
$scope.layout = {
current: 'single-table.html'
};
$scope.layout.get = function() {
return $scope.layout.current;
};
模板: main.html
<div class="btn-group">
<button ng-cl
浏览 3提问于2014-10-02得票数 0
我尝试在cList中显示每个项目，但它不起作用。它创建了正确数量的div标签(来自ng-repeat)，但它们是空的。似乎没有定义项目，所以什么也没有显示出来。
这是控制器：
var app = angular.module('MyApp');
app.controller('listController', function($scope) {
$scope.cList = [ 'c1', 'c2', 'c3', 'c4', 'c5' ];
});
这是HTML：
<d
浏览 23提问于2016-09-19得票数 0
1回答
我希望将一个变量或文本传递给模板，以便它显示模板中的值。
我遇到了，它显示它在工作，但它使用ng-repeat。在不使用ng-repeat的情况下，有没有一种简单的方法来做到这一点？
<div ng-repeat="name in ['John']" ng-include="'partial.html'"></div>
<div ng-repeat="name in ['Jack']" ng-include="'partial.html'"
浏览 1提问于2014-11-19得票数 2
回答已采纳
这是我的html代码
<body ng-app="mainapp">
<div id="wrapper">
<div class="tree" ng-controller="MenuController">
<ul>
<li ng-repeat="menu in menulist">
<a>{{menu.title}}</a>
<ul>
<li
浏览 3提问于2015-04-30得票数 0
我使用AngularJS ng-重复以查看我的表元素(它不应该经常使用-我知道-但我不知道如何用其他方式)
这里我的例子是如何在表中显示containerObjects：
ng-repeat=...
我有很多containedObjects (包括start、end和containerType) (大约每页600 )，如表所示。花了大约3秒的时间才展示了这幅景象。
我现在的问题是，是否可以改进一些东西以提高性能。是否有可能替换/更改ng-重复以减少加载时间。
非常感谢!
编辑
我也有这个函数调用，但是我不知道如何防止函数调用。有没有人知道我能怎么改进这个？非常感谢！
ng-repeat=&#
浏览 2提问于2015-09-16得票数 3
回答已采纳
如果我要添加一个新的联系人，它会被添加到ul - li中，而不是select - option中。
这是我的程序。
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World, AngularJS - ViralPatel.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js&#
浏览 0提问于2014-11-23得票数 0
我正在尝试从一个角度控制器创建一个下拉列表:我的html代码：
<select>
<option value="" disabled selected >Choose your option</option>
<option ng-repeat="ty in type">{{ty.$value}}</option>
</select>
控制器代码：
var typeRef = new Firebase(FIREBASE_URL + "/type");
var
浏览 0提问于2015-08-19得票数 0
3回答
我对AngularJS非常陌生，我正在尝试将下面的jQuery代码迁移到AngularJS。
$('#someid').on('click', 'someclass', function() {
$(this).next().slideToggle('fast');
});
我开始转换为AngularJS的HTML如下所示
<ul id='someid'>
<li ng-repeat="...">
<ul>
<li class=&
浏览 5提问于2013-07-28得票数 2
回答已采纳
2回答
当我用Chrome打开文件angular.html angularjs时，html正常工作，显示表中的信息数组。但是，当我使用相同的angular.html文件Django时，angularjs不显示表中的信息数组。我不知道我能做什么？
文件angular.html
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script&g
浏览 5提问于2014-12-22得票数 1
回答已采纳
1回答
因此，我有一个AngularJS函数，当调用它时，应该将一个列表元素添加到DOM中的div中，并且该列表应该是ng-repeat的，这样它就可以迭代列表中的对象。
列表中的这些对象包含一些我想打印出来的属性。
AngularJS程序的一部分
var el = angular.element(document.getElementById('categories'));
el.append('<ul id="' + categoryItemStr + '"><li ng-repeat="item in catego
浏览 0提问于2017-10-01得票数 0
我从API得到了大约1000条记录。我想在没有分页的情况下在UI中显示(我们现在有一些其他问题)。我使用ng-repeat将这些记录加载到html中。ng-repeat会花很多时间来渲染这些页面，我也使用了'track by id‘。
如何提高ng-repeat的性能？我有什么选择？
浏览 0提问于2017-09-12得票数 0
1回答
我正在AngularJS中创建一个拖放指令。我的directive在ng-repeat中有问题。
问题是，当我将元素拖到可下垂的div上时，它总是从列表中获取最后一个元素。如果我拖动列表中的第一个，它仍然需要删除最后一个。这是我的HTML：
<li ng-repeat="data in source">
<div draggable="#divDrop" drop-model="otherList" push-object="data">
{{data.name}} {{data.pric
浏览 3提问于2014-03-20得票数 0
回答已采纳
1回答
我对角很陌生，我遇到了一个问题。我希望有一个简单的方法来解决这个问题。
基本上，我有一个从服务器检索的约会列表。
$scope.appointments = [{starts_at: "2015-1-1", name: "First"}, {starts_at: "2015-1-1", name: "Last"}, {starts_at: "2015-1-2", name: "Next Day"}];
现在我想把这些约会列在名单上。我决定为此使用ng-repeat +过滤器，但现在我被困住了。
&l
浏览 0提问于2014-11-12得票数 0
回答已采纳
我想通过嵌套的json结构在我的html页面上显示"name“值，但是我无法得到确切的结果，我希望在我的ng-repeat中缺少它的一些语法。请告诉我使用javascript或angularjs在表中显示"name“值的错误是什么？我创造了。提前谢谢。
app.js：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$http.get("test.json").success(functi
浏览 2提问于2016-08-17得票数 0
回答已采纳
如何在div中动态创建AngularJS元素？
例子：
<table ng-controller="tableController">
<tr ng-repeat="totaldivs in parameters">
<td ng-repeat="divId in totaldivs">
<!--
want to replace something like below div
<div id="days_01"><span>DI
浏览 3提问于2016-11-18得票数 0
2回答
AngularJs未通过
、、、
我有一份员工名单。现在，我想将每条记录链接到一个员工配置文件。但不管我怎么做，它都不起作用。
这是我的代码：
<tr ng-repeat="employee in homeCtrl.employees" ng-href="#/werknemer/{{employee.EmployeeId}}">
<td>{{ employee.Role }}</td>
<td>{{ employee.Company }}</td>
<td>{{ employee.FirstNa
浏览 0提问于2016-03-24得票数 1
我按照下面的教程添加了两个角值；
但是现在我必须将动态文本框值和在ng-重复中。
我有以下代码
HTML代码
......
<table>
<tr>
<th>Name</th>
<th>Days</th>
</tr>
<tr ng-repeat="si in serImp">
<td>{{
浏览 5提问于2016-02-14得票数 1
以下是演示：
table1起作用了
在table2中，我写了一个渲染td的指令，但不是work。我也不知道原因。
Html：
<table>
<tbody>
<tr ng-repeat="tr in vm.getTrs() track by $index">
<form-cell ng-repeat="cell in vm.getCellsByRow($index+1)">data</form-cell>
</tr>
</tb
浏览 0提问于2016-08-27得票数 0
我有以下代码
HTML
<div ng-app>
<div ng-controller="TestCtrl" ng-repeat="icecream in iceCreams track by $index">
<div ng-repeat="a in range(icecream.rating)"> star icon</div>
<div ng-repeat="a in range(icecream.rating)"> sta
浏览 1提问于2018-09-18得票数 0
回答已采纳
我想用angularjs在dropdownlist中选择特定的项目我使用了这个代码，但它不起作用
<select class="form-control" ng-model="primaryObjectId" ng-change="getPrimaryObjectColumns()">
<option value="{{object.id}}" ng-repeat="object in objectList">{{object.name}}</op
浏览 0提问于2015-08-11得票数 1
是否可以将参数传递给ng-if中的指令模板？
index.html：
<my-directive showName="John"></my-directive>
template.html：
<h1 ng-repeat="customer in customers" ng-if="customer.name === showName ">
{{customer.name}} is {{customer.age}}
</h1>
理想情况下，上面的示例只显示John的数据。也许这不是正确的方法？因
浏览 3提问于2015-03-27得票数 0
回答已采纳
我已经尝试过像这样获取索引
这是我的html
<div ng-repeat="item in items" ng-click="findindex($index)"></div>
这是控制器
$sceop.findinedx=function(index)
{
alert(index);
}
在这里我可以获得索引value.but，我希望通过指令获得索引值
这是我的html
<div ng-repeat="item in items" my-directive></div>
这是我
浏览 0提问于2013-11-26得票数 1
我有一个使用角度1.6动态生成的表。数据来自JSON格式的web。这是一个数据样本。
{
"CallData": [
{
"TableHeaders": [
{
"id": "0",
"text": "Time"
},
{
"id": "1",
"text": "January"
浏览 3提问于2017-11-09得票数 0
回答已采纳
为什么我的外部模板不使用ng-repeat呈现项？
- AngularJS 1.1.5
我偶然发现了，但我不确定这是否是同一个问题？如果是的话，周围有工作吗？
这里是一个使用静态列表的，但是该解决方案需要支持双向绑定，因为数据是动态的。(反正应该是这样的.)
控制器
.controller('main', ['$scope',function($scope) {
$scope.items = ['a','b','c'];
}])
指令
.directive('items', function()
浏览 3提问于2013-08-02得票数 2
回答已采纳
我希望使用angularJS绑定按特定计数时间绑定html表行，如下所示：
<table>
<tr ng-repeat="x in 5">
<td>abc</td>
</tr>
</table>
如果有人有解决办法，请尽可能回复。谢谢
浏览 6提问于2017-07-25得票数 5
回答已采纳
3回答
我在ng-repeat中做了一些dom操作。现在，我想重新设置DOM，以匹配ng-repeat正在循环的模型。如何强制AngularJS重绘ng-repeat内容。
应用程序不起作用，显然不会导致对模型所做的更改。
浏览 10提问于2016-12-20得票数 0
回答已采纳
在性能方面，将单个对象传递给指令是否更好，如下所示
<div ng-repeat="user in users">
<user-info user="user"></user-info>
</div>
// user-info directive
<div>
<span>{{ user.username }}</span><br>
<span>{{ user.email }}</span>
</div>
或者将整个数组
浏览 0提问于2018-09-18得票数 2
1回答
如何并排显示两个列表
、、、、
我知道这是个愚蠢的问题，但我不明白为什么我不能这么做。我一直在搜索堆栈溢出，但是答案只在没有AngularJS的情况下起作用。我不能同时显示两个列表。我用ng-重复让列表显示，但它们最后都成了一行。由于某些原因，它的工作非常好，没有重复。这个代码片段不能工作，因为我需要两个html文件，但它在这里。
var app = angular.module("app", [])
.controller("CustomDirectiveController", function ($scope) {
$scope.list = ["go
浏览 2提问于2016-04-28得票数 0
回答已采纳
2回答
我正在使用angularJS创建一个表。但它并没有那么好的ATM机。这是我的问题。
代码：
appGenerator.controller('customersCtrl', function ($scope) {
$scope.names = [
{"Name": "EMAIL", "StringValue": "dsa@dsada", "Type": "C"},
{"Name": "DESC", "S
浏览 1提问于2015-10-30得票数 0
回答已采纳
2回答
AngularJS 1.3.15
jQuery 2.1.3
“严格使用”
传递参数到函数不起作用。
C.change = 328；
ng-click="editMapSize( C.change )“
页面中的()
ng-click="editMapSize( C.change )“
ng-click="editMapSize( {{ C.change }} )“
误差
语法错误:从{editMapSize}}开始的表达式editMapSize( {{C.change}} )第15列上的令牌'{‘无效键。
.html
<table clas
浏览 3提问于2017-04-12得票数 0
4回答
我有以下数据和HTML模板(显然还有app.js中的其他代码)。我的"tbody“中的代码工作得很好，并显示了如下表：
电流输出
--------------------
| AAPL | 127 | 128 |
--------------------
| GOOG | 523 | 522 |
--------------------
| TWTR | 35 | 36 |
--------------------
现在，我正试图遍历第一个对象的“键”，并将它们显示在“头”中，如下所示：
期望输出
--------------------
| Name | jan | feb |
浏览 5提问于2015-07-05得票数 1
回答已采纳
我将AngularJS与生成html响应的第三方服务一起使用。我想使用ng-repeat将HTML响应呈现为列表，而Angular将其呈现为文本。
可以使用ng-repeat来呈现HTML属性吗？
我创建了这个jsFiddle来演示我的问题。
浏览 1提问于2012-07-10得票数 17
回答已采纳
我有一个包含HTML的字段。当我使用{{field}显示时，不会呈现html。如何将字段显示为呈现的html？customForm.Description包含html：
<h4>Work Requests</h4>
<div ng-repeat="customForms in customFormGroups" class="row">
<div ng-repeat="customForm in customForms" class="col-sm-4">
<stron
浏览 5提问于2014-06-27得票数 1
回答已采纳
我使用ng-repeat来呈现一个html table。我的控制器看起来像这样：
app.controller("fooCtrl", function($scope, WebSocket) {
$scope.foo = [ ... ];
WebSocket.start(function(data) {
// this is a callback on websocket.onmessage
// here is a for loop iterating through $scope.foo objects and updating them
});
浏览 3提问于2013-12-16得票数 13
回答已采纳
我在AngularJS中使用了基金会。我有一个例子，我正在尝试使用ng-repeat在列中显示内容。
<div class="four columns" ng-repeat="resultsObject in resultsObject">
<div ng-bind-html-unsafe="resultsObject"></div>
</div>
这可以很好地工作。但问题是列的大小可能在1-5之间。我想让显示器动态更新。因此，如果只有2列，它将调整为正确的列显示。
<div clas
浏览 0提问于2013-05-07得票数 1
回答已采纳
我试图在一个使用ng-repeat的div中插入一个href链接。这个href链接需要与使用ng-repeat创建的每个div不同，它的值是AngularJS $scope变量的一部分。
下面是我的JS代码：
var app = angular.module('test', []);
app.controller('MainCtrl', function($scope) {
var database = firebase.database();
database.ref(`trips/${userid}/trips`).once('va
浏览 1提问于2017-07-25得票数 0
回答已采纳
1回答
我对angularjs很陌生，并且使用这个指令如下所示。当这个指令加载到HTML文件中时，它应该将这些HTML视为实际的HTML，而不是字符串，但它不起作用。我使用的是角1.4.7版本。
救命啊！！我在下面添加HTML作为字符串，因为我是动态地从服务中获得HTML作为字符串。因此，这只是我在这里添加的一个例子，看看如何在angularjs上显示html值，如果它以字符串的形式出现。
angular.module('my.directive', [])
.directive("myDirective", function(){
return
浏览 8提问于2015-11-14得票数 0
回答已采纳
1回答
我想对一个表进行排序，其中的标题和内容是用ng-repeat检索的。当我单击标题项时，我希望该列按字母顺序排序。但我不确定我该怎么做 这是我的html： <div class="pane pane--table1">
<div class="pane-hScroll">
<table>
<thead>
<tr>
<th ng-repeat="item in header" ng-click="sortColumn
浏览 10提问于2019-10-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
