捕获重复项并在ng-repeat的track中忽略它们，不带过滤器(AngularJS)
在AngularJS中，ng-repeat指令用于在HTML模板中循环渲染数据。当ng-repeat遍历一个数组或对象时，有时会出现重复项的情况。为了避免重复项对性能的影响，可以使用track by表达式来捕获重复项并忽略它们。
track by表达式允许我们指定一个唯一标识符来跟踪每个重复项。这个标识符可以是数组或对象中的某个属性，或者是一个表达式的结果。通过指定track by表达式，AngularJS可以根据这个标识符来判断重复项，并在渲染过程中忽略它们。
以下是一个示例：
<div ng-repeat="item in items track by item.id">
{{ item.name }}
</div>在上面的示例中，ng-repeat指令遍历名为items的数组，并使用item.id作为每个重复项的唯一标识符。这样，如果数组中存在多个具有相同id的项，AngularJS将只渲染其中的一个项，并忽略其他重复项。
使用track by表达式可以提高ng-repeat指令的性能，特别是当遍历的数组或对象非常大时。它可以减少DOM操作和渲染时间，从而提升应用程序的性能和用户体验。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（CVM）是一种可弹性伸缩的云计算基础设施服务，提供高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器，灵活部署和管理应用程序。
相关·内容
我可以使用过滤器过滤表达式而不需要在angularjs中重复。
<li><input ng-model="query" placeholder="search on players" /> <input ng-model="q" placeholder="search on teams" /></li>
<li ng-repeat="(nomeTeam, squadre) in listaSquadre" >
浏览 7提问于2013-12-09得票数 0
回答已采纳
1回答
我尝试使用ng-repeat和按表达式跟踪显示对象数组，但一直收到此错误：
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: contact in ctrl.contacts track by contact.id | SearchbarFilter:ctrl |
浏览 1提问于2015-05-22得票数 0
2回答
我正在使用Angular Js开发一个web应用程序。我想使用ng-repeat指令将div填充到我的html视图中。ng-repeat使用的数组有一些重复项，但在我的视图中，我希望只显示一次项(如果元素已经显示，则其副本必须以图形方式隐藏)。我该怎么做呢？
<div ng-repeat="item in selectedProcedures track by $index">
<span>{{item.id}}</span>
</div&g
浏览 0提问于2015-10-09得票数 0
我试着把一些视频放在这个json文件中，放在一个div里面，这是json文件：
{
"videos": {
"name": [
"dfg.webm",
"fdgh.mp4"
]
}
}
脚本是这样的：
(function(){
var app=angular.module("index",[]);
var videoUrl=function(name){
alert("asd&#
浏览 0提问于2015-01-04得票数 3
回答已采纳
我从API得到了大约1000条记录。我想在没有分页的情况下在UI中显示(我们现在有一些其他问题)。我使用ng-repeat将这些记录加载到html中。ng-repeat会花很多时间来渲染这些页面，我也使用了'track by id‘。
如何提高ng-repeat的性能？我有什么选择？
浏览 0提问于2017-09-12得票数 0
对于我的AngularJS应用程序，我在ng重复中有一个ng重复，如下所示：
Html：
<div ng-app="myApp">
<div ng-controller="myController">
<h2>working filter</h2>
<div ng-repeat="category in categories">
<h3>{{category}}</h3>
&l
浏览 2提问于2013-05-17得票数 5
回答已采纳
1回答
我有以下几点-重复：
<td data-ng-repeat="scheduleAbsenceDayContainer in scheduleAbsenceMonthContainer.scheduleAbsenceDayContainers track by $index
scheduleAbsenceDayContainer可以包含一个scheduleIntervalContainers数组。
我现在的问题是，是否有可能使用一个特殊的scheduleIntervalContainers containerType值来过滤所有的containerType。我的过滤器名是
浏览 1提问于2016-03-24得票数 0
回答已采纳
1回答
我有大量的数据，供用户在几天内按小时计算的可用性：
availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... }
arrayOfUsers= [ userArray, userArray, ... ]
userArray= [ "username", "h0", "h1", "h2", ... "h23" ]
我有这种形式的arrayOfUsers，所以我可以根据它们的“h0”.“h23”值对它们进行排序。对于一个
浏览 4提问于2014-02-14得票数 0
回答已采纳
我有两个纳克重复，一个在另一个里面。
<table ng-repeat="all in values track by $index">
<tr ng-repeat = "errors in all track by $index">
// I want to use the $index of both ng-repeats
</tr>
</table>
我必须使用两个ng重复序列的$index。我如何区分一种$index和另一种？
浏览 12提问于2015-06-19得票数 1
回答已采纳
我是新的角度，我通过这个文档，但不理解目标的跟踪子句使用ng-选项。
这里有几种用法
<div ng-repeat="n in [42, 42, 43, 43] track by $index">
{{n}}
</div>
<div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">
{{n}}
</div>
<div ng-repeat="model in collection track by model.
浏览 7提问于2016-04-18得票数 1
回答已采纳
我试图实现以下几点：
<li ng-repeat="item in items | limitTo:item.limitOfItems track by $index">
但是，并不是每个项目都定义了item.limitOfItems。如果未定义它，则根本不运行ng-重复。为此，我正在寻找一种方法来首先检查这个项目是否定义了item.limitOfItems，如果是的话，使用limitTo函数。
Update：如果属性(limitOfItems)不可用，我不希望li元素呈现。
我找到了一种解决问题的方法，方法如下:也许我的问题措辞有误，但我不希望
当不提供此属性
浏览 0提问于2016-01-15得票数 0
我在我的页面上重复一遍。ng-class工作得很好。
<div class="card news" ng-repeat="item in news track by $index" id="{{news.nid}}" ng-init="parentIndex = $index" ng-class="{hidden: '{{getCheck($index)}}' == 'true'}">
...
</div>
现在我需要，如果所有项目都是隐
浏览 3提问于2017-09-15得票数 1
回答已采纳
这是我的html
<body>
<div ng-app="repeatdemo" ng-controller="rd">
<input type="text" ng-model="nameSearch" />
<div ng-repeat="x in names track by $index | filter : nameSearch">
{{x }}
</div>
</div>
这是我的剧本
<script>
var rdapp
浏览 2提问于2015-04-19得票数 5
回答已采纳
我有一个数组的用户，我想让我的ng重复按姓氏排序时，第一次加载。在添加了一个新用户之后，请将ng-重复顺序按日期添加，然后再加上姓氏。本质上，我希望最新的用户被推到ng-重复的顶端。
<th ng-click="menuFilter('lastName', 1);">
<div ng-class='{"menuSort":sortColumn==1}'>Name <span ng-show="share.orderByField == 'lastName'">
浏览 5提问于2014-06-16得票数 0
回答已采纳
以下代码不起作用，因为集合包含重复项：
<div ng-repeat="value in [4, 4]"></div>
我认为以下方法应该起作用，但不幸的是没有起作用：
<div ng-repeat="value in [4, 4] track by $index"></div>
那是个bug吗？
有没有一种方法可以在包含复制的集合上使用ng-repeat？
提前谢谢你，
奥利维尔
浏览 7提问于2013-12-08得票数 14
我的Angular应用程序中的刷新按钮有一个问题：
我有一个json对象，里面有两个数组-> data = {array1: [], array2: []}
我想循环两个数组并打印相关的值。为了实现这一点，我使用如下的Angular ng-repeat指令：
ng-repeat="index in [] | index:getTotalNumberOfObjectsInArray1()"
...
<span ng-bind="data.array1[index]"></span>
<span ng-bind="data
浏览 0提问于2015-06-24得票数 1
2回答
我现正按日期订购下列货品：
<div class="inbox" ng-repeat="recipient in messages | orderBy: 'recipient':true">
<ul>
<div>
<li class="inboxItem">
<a ng-href="#/messaging/userChat/{{recipient.$id}}"><span> {{recipient.$id
浏览 2提问于2015-03-26得票数 0
回答已采纳
我有这些专栏：
Column
1
1
2
我希望在结果中重复的'1‘不会在ng-repeat中重复。下面是插图：
Column
1
2
有没有办法检查如果一个值被重复，它将不会被包含在ng-repeat的迭代中？
到目前为止，我的工作是：
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tbody>
<tr ng-rep
浏览 1提问于2017-11-08得票数 0
纳克-重复输出什么都没有。在链接函数中，我可以看到$scope.clients是一个数组。如果我移除隔离作用域，并使用父作用域，ng-重复工作。
带有指令“客户端”的html。
<div container
ng-cloak
ng-app="summaryReportApp"
ng-controller="summaryReportController as summaryReport">
<fieldset clients="summaryReport.clients">
<l
浏览 4提问于2015-02-12得票数 2
在Angular.js中没有使用ng-重复的数据时，我得到了以下错误
错误：
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes?p0=user%20in%20objHodUserData&p1=string%3Al&p2=l
at Error (native)
at http://oditek.in/Gofasto/js/angularjs.js:6:416
at http://oditek.in/Gofasto/js/angularjs.js:279
浏览 4提问于2015-11-13得票数 0
我有两个作用域对象
$scope.selectedItems = [1,3]
$scope.items = [{'id':'1','name':'apple'},{'id':'2','name':'banana'},{'id':'3','name':'grapes'}]
在我的模板中，我想对$scope.selectedItems使用ng-repeat，但要显示项目名称。有可能吗？
史密斯。喜欢
<
浏览 1提问于2015-10-04得票数 0
<li ng-repeat="item in quantityList track by $index" ng-model="isPageValid='true'">
<input value="item.quantity" ng-blur="validateQuantity(item)" ng-model="item.quantity">
</li>
每次出现ng重复循环时，我都试图为状态变量设置一个默认值。我试过了，但那不管
浏览 1提问于2018-02-12得票数 0
2回答
我有一个数组
$scope.answers=["","","",""]
表示数组有多个空元素。
<li ng-repeat="item in answers "><input type="text" ng-model="item"/></li>
它抛出错误，在ng-repeat中不允许重复值。如果我使用
<li ng-repeat="item in answers track by $index"><input t
浏览 2提问于2014-10-02得票数 1
我正在尝试对对象数组(鞋子)中的一部分大小数组进行排序。orderBy筛选器不起作用。我以随机顺序显示大小。
<div class="choice" ng-repeat="store in pc.stores track by $index">
<div class="sizes" <span ng-repeat="size in store.shoes[0].sizes | orderBy:size track by $index">{{size}}</span></div&g
浏览 5提问于2017-08-30得票数 1
当我有多个具有相同名称(数组)的ng模型时如何使用过滤器。我的模型如下所示。我正在尝试过滤多维字符串数组。
<input type="text" ng-model="search[$index]" class="form-control"/>
<!-- val is multi dimensional String array -->
<!-- I want to use something like below -->
<tr ng-repeat="obj in val | filte
浏览 2提问于2016-02-22得票数 0
回答已采纳
我使用Angularjs已经有一段时间了，并且遇到了一个奇怪的问题。
Im将返回的数据呈现到一个ng-repeat中，我能够列出由条目_id排序的数据，从而显示最新的第一个。但是，当我创建一个插入新项并使用push的add函数时，随后的项被添加到列表的底部(当它需要位于顶部时)--这并不重要，因为我刚刚创建了一个orderBy过滤器：
data-ng-repeat="post in posts | orderBy:'_id':true"
这做了一个技巧，当一个新的项目被添加宾果，它实际上是优势的ng重复列表。但是(这里是棘手的部分)每一项，包括新添加的项目，都可
浏览 2提问于2015-01-05得票数 4
回答已采纳
我有一系列的任务，其中有两个重复的部门，但我不想在ng-重复中显示第二个重复的记录，而是只对第一个记录显示，即使它是重复的。这是我的密码，有人能告诉我哪里出错了吗。
<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==$index.department.departmentCode : false"&
浏览 6提问于2016-03-25得票数 0
回答已采纳
我编写了一个包含此函数的控制器：
$scope.getItemName = function (id) {
sgcdata.get('item', {
_id: id
}).then(function (dataItem) {
return dataItem[0].brand_name + " " + dataItem[0].reference;
});
}
并认为：
<li ng-repeat="itemCart in connectedUser.cart track by $index&#
浏览 0提问于2018-01-30得票数 0
回答已采纳
我有以下指令(sales.jade)：
div(ng-repeat='product in products')
div.col-md-4
button.btn.btn-block.sell-button(id='{{product._id}}' role='button' ng-click='sell()'){{product.name}}
div(ng-repeat='p in supp track by $index | limitTo: 3')
p {{p.name}}
联
浏览 0提问于2014-08-10得票数 1
回答已采纳
我在ng中使用ng-重复，如下所示
<tbody>
<tr ng-repeat="track in machine.noteMatrix2">
<td>--</td>
<td ng-repeat="step in track">
<input type="checkbox" ng-model="track[$index].value">
{{step.v
浏览 0提问于2019-01-15得票数 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
回答已采纳
有一个不断增加的数组变量。每当添加新元素时，都会触发过滤器。数组过滤所有元素。由于我重复的数组包含实时数据，因此添加了连续数据。这会导致性能损失。随着数组大小的增长，过滤器开始失效。
ng-repeat="data in col.columnData
| filter:{body:col.UIFilter.match}
| filter:repostQuery(col.UIFilter.repost)
| filter:mediaQuery(col.UIFilter.media)
浏览 2提问于2018-07-11得票数 0
我的AngularJS控制器(称为“搜索”)具有以下变量：
this.redInfo = [...];
this.blueInfo = [...];
this.greenInfo = [...];
this.tableSelector = ''; //this can either be 'red', 'blue', or 'green'
我正在尝试做一个ng-repeat，其中被重复的信息依赖于tableSelector。这个是可能的吗？这就是我现在拥有的：
<div ng-repeat="row in {{
浏览 0提问于2019-03-27得票数 0
回答已采纳
我知道您可以使用track by expr来指定如何在ng-repeat指令中键控项。
但是没有track by，AngularJS如何识别项目？
例如，我可以通过更改对象来控制对象的跟踪方式，而不使用track by吗？
从医生那里：
如果未指定跟踪函数，则集合中的ng-重复关联元素按标识进行关联。
但这还不清楚。“收藏中的身份”是什么意思？
浏览 5提问于2014-10-30得票数 2
回答已采纳
我有ng-重复使用track子句(优化性能)。我还有一个自定义指令，用于处理每个tr：
<tr ng-repeat="item in Products track by item.Id"
on-row-rendered="rowRendered">
app.directive('onRowRendered', function($timeout) {
return {
restrict: 'A',
link: function (scope, element, att
浏览 2提问于2014-09-18得票数 1
回答已采纳
我想在页面上找到第一个id的index的第一个ng-repeat。不使用jQuery并使用此值并将其存储在新的$scope.firstId中。我需要视图中的价值。
编辑:我需要这个值来播放页面上找到的第一个id .
我的控制器中有三个$scope：
$scope.albums = {}
$scope.artists = {}
$scope.tracks = {}
所有这些元素都有一个键id。
<div ng-repeat="album in albums">
{{ album.id }}
</div>
<div ng-repeat="
浏览 0提问于2014-07-02得票数 3
角Js重复删除"，“在”最后一个字在循环“之后，我尝试过使用$last，但我正在筛选数组上的selected = true条件。
<span ng-repeat="primaryPrograms in ctrl.primaryProgramStudies" ng-show="primaryPrograms.selected == true">
{{primaryPrograms.name}} ,
</span>
输出：ACT , AP , Math(non-SAT) ,
带索引的：
我只能从循环中获得所选的=真值
<
浏览 3提问于2017-06-21得票数 0
回答已采纳
1回答
有没有什么方法可以避免在ng-repeat中显示重复项？
如果我们在数组中添加重复项，它将弹出[ngRepeat:dupes]，这可以用ng-repeat="item in items track by $index"解决。好的。
但是，如果我们不想显示副本怎么办？我曾想过在创建数组时进行过滤：
if(!$scope.items.indexOf($scope.item ) == -1 ) {
$scope.items.push( $scope.item );
}
但是，有没有其他的角度的方式呢？
浏览 2提问于2013-11-05得票数 0
1回答
我有一个ng重复，由参数city & first_name过滤，如下例所示：
vm.search = {
"city": "D.C.",
"first_name": "Chu"
};
<li ng-repeat="item in user | filter: search">...
var appname = 'app';
var dependencies = [];
angular.module(appname, dependencies);
var a
浏览 5提问于2016-01-13得票数 1
2回答
我有一个从API调用中获得的对象，其中包含很多我不一定需要的数据。如何设置我的ng-重复只显示我想要的列。
例如，每行有13列，我只想要列1、3、11。
<td> {{a.blah}}</td>
<td> {{a.foo}} </td>
这是我目前正在重复的。我知道这一定是关于对索引的过滤。
<tr ng-repeat="d in playerInfoBody track by $index">
<td ng-repeat="a in d track by $index
浏览 2提问于2016-07-19得票数 2
回答已采纳
例如，我有一个重复列表：
<ul>
<li class="suggestion-item" ng-repeat="item in suggestionList.items | filter: {id: 2} track by track(item)">{{item.text}}</li>
<ul>
我是否可以(如果不改变控制器，因为这是一个指令)检查:如果筛选结果不是空的-然后显示整个ul，如果没有，那么隐藏ul。我的意思是：
<ul ng-if="(item in suggestionLis
浏览 2提问于2015-06-26得票数 0
回答已采纳
divs被正确地重复，没有错误，但它们没有基于值的顺序。我希望最终有功能的div是排序的最大和最小值通过按钮或复选框，但我被困在这里。如有任何帮助，将不胜感激，谢谢！
下面是我的ng-repeat：
<div ng-repeat="(key, value) in frequency track by $index | toArray | orderBy:'value' ">
</div>
以下是我的数据：
$scope.frequency = [1: 138, 2: 147, 3: 144, 4: 144, 5: 148, 6: 140,
浏览 0提问于2015-09-04得票数 0
angular.module("myApp",[])
.controller("myCtrl",function($scope) {
$scope.persons = [{name:"teja",age:11},
{name:"Ash",age:12},
{name:"teja",age:11}];
});
角不允许
浏览 4提问于2017-03-08得票数 0
回答已采纳
我有一个用ng-repeat显示的项目列表。我想要添加一个过滤器来显示/隐藏存档的项目。
我添加了一个复选框：
<input type="checkbox" ng-model="queryFilter.archived">Show archived messages
在我的控制器里我有这样的东西：
$scope.queryFilter = {
archived: false
};
我的项目列表显示在表中。我试过以下几种方法：
<tr ng-repeat="message in messages | filter : queryF
浏览 6提问于2016-05-22得票数 6
回答已采纳
3回答
我正在尝试使用过滤器过滤出一个日期，它是一个字符串。我从API获得的日期是
"/Date(1418716652000+0000)/"
我有一个函数，它将日期转换为我想要的类型：
1418716652000
其职能是：
$scope.convertDate = function(published_first) {
var date = (published_first.match(/\(.*\)/, ''));
var convertedDate = date[0];
date = eval(convertedDate.replace(/
浏览 7提问于2014-12-17得票数 0
回答已采纳
我正在创建动态单选按钮和复选框.But当输入它们的标签时，我们如何才能进行验证，以使下一个控件的名称不会重复
<span style="padding-left: 20px" ng-repeat="r in field.rbtn track by $index | unique:'r.radioname'" >
<input type="radio" id="radio_{{$index}}">{{r.radioname}}
</span>
为此，我使用了类似于this
浏览 0提问于2015-11-16得票数 0
我正在使用上面的Angularjs库在ng-重复中使用唯一的属性。
下面是我的代码
<div class="rankblock" ng-repeat="item in sports.Ranks.Rank |unique:'_position'>
<span> {{sports.Ranks.Rank.length}}</span> //
</div>
在ng中唯一重复后，我的秩数组长度变为6，但它仍然在输出中显示9(原始Arr长度)。
浏览 2提问于2016-04-01得票数 2
回答已采纳
1回答
我正在尝试用关联数组实现一个简单的ng-repeat，但是到目前为止还没有成功。我有以下数据：
[1: "Test", 2: "Second Test", 7: "Another Test"]
我将其保存在一个名为participantsList的变量中，该变量将发送到HTML。我使用$parent是因为我有一个包装的超文本标记语言页面，包含ng-repeat的页面在其中呈现。下面是HTML代码：
<select class="form-control" id="participant_drop_down_list&
浏览 1提问于2016-01-20得票数 0
我想在数据库中过滤我的商品存储，但是我不想像这样使用过滤器：
<li ng-repeat="post in posts | filter: { etat: 'enCours' } ">
这一行过滤了所有etat = 'enCours‘的帖子，但是这给我带来了几个问题，我有几个ng-重复，我不能使用$index。
我想做这样的事情：
<li ng-repeat="post in postsEnCours">
通过使用此功能：
This line give me all the post store in my dat
浏览 0提问于2016-01-13得票数 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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
