blocks|key|115871|text|或者，您可以将项目本身传递给removeItem函数，而不是使用$index+-正如您已经注意到的-它将指向排序/筛选数组中的索引：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|115872|<a><img+src="img/delete.png"+ng-click="removeItem(item)">{{$index}}</a>|code-block|syntax|javascript|115873|并修改removeItem函数以使用数组的indexOf方法查找索引，如下所示：|115874|$scope.removeItem+=+function(item){
+++$scope.items.splice($scope.items.indexOf(item),1);
}|115875|entityMap^0|E|A|W|6|0|0|3|A|L|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

Instead or relaying on the <code>$index</code> - which - as you have noticed - will point to the index in a sorted / filtered array, you can pass the item itself to your <code>removeItem</code> function:

<pre><code>&lt;a&gt;&lt;img src="img/delete.png" ng-click="removeItem(item)"&gt;{{$index}}&lt;/a&gt;
</code></pre>

and modify the <code>removeItem</code> function to find an index using the <code>indexOf</code> method of an array as follows:

<pre><code>$scope.removeItem = function(item){
 $scope.items.splice($scope.items.indexOf(item),1);
}
</code></pre>

blocks|key|115888|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|115889|$scope.remove+=+function(subtask)+{

++++var+idx+=+$scope.subtasks.indexOf(subtask),
++++++++st+=+$scope.currentTask.subtasks[idx];

++++//+remove+from+DB
++++SubTask.remove({'subtaskId':+subtask.id});

++++//+remove+from+local+array
++++$scope.subtasks.splice(idx,1);

}|code-block|syntax|javascript|115890|你可以在我的博客中找到this+entry的详细解释。|offset|length|115891|entityMap|0|LINK|mutability|MUTABLE|url|http://sky2high.net/en/2013/04/angularjs-do-not-pass-index-in-ng-repeat-if-you-use-orderby/^0|0|0|B|A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try this:

<pre><code>$scope.remove = function(subtask) {

 var idx = $scope.subtasks.indexOf(subtask),
 st = $scope.currentTask.subtasks[idx];

 // remove from DB
 SubTask.remove({'subtaskId': subtask.id});

 // remove from local array
 $scope.subtasks.splice(idx,1);

}
</code></pre>

You can find verbose explanation in <a href="http://sky2high.net/en/2013/04/angularjs-do-not-pass-index-in-ng-repeat-if-you-use-orderby/" rel="nofollow">this entry</a> in my blog.

blocks|key|115927|text|我遇到了同样的问题，这个主题中的其他答案不适合我的情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|115928|我已经解决了自定义过滤器的问题：|115929|angular.module('utils',+[]).filter('index',+function+()+{
++++return+function+(array,+index)+{
++++++++if+(!index)
++++++++++++index+=+'index';
++++++++for+(var+i+=+0;+i+<+array.length;+%2B%2Bi)+{
++++++++++++array[i][index]+=+i;
++++++++}
++++++++return+array;
++++};
});|code-block|syntax|javascript|115930|它可以这样使用：|115931|<tr+ng-repeat="item+in+items+%7C+index+%7C+orderBy:'Store.storeName'">|115932|然后在超文本标记语言中，你可以用item.index代替$index。|offset|length|style|CODE|115933|此方法适用于对象的集合。|115934|请考虑到此自定义筛选器应该是应用的所有筛选器列表中的第一个筛选器(orderBy等)它会将附加属性index+(名称可自定义)添加到集合的each对象中。|115935|entityMap^0|0|0|0|0|0|G|A|S|6|0|0|1D|5|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@$O|14|P|15|Q|R]|$O|16|P|17|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@$O|1A|P|1B|Q|R]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|X|$]]

I had the same problem and other answers in this topic are not suitable for my situation. 

I've solved my problem with custom filter:

<pre><code>angular.module('utils', []).filter('index', function () {
 return function (array, index) {
 if (!index)
 index = 'index';
 for (var i = 0; i &lt; array.length; ++i) {
 array[i][index] = i;
 }
 return array;
 };
});
</code></pre>

which can be used this way:

<pre><code>&lt;tr ng-repeat="item in items | index | orderBy:'Store.storeName'"&gt;
</code></pre>

and then in HTML you can use <code>item.index</code> instead of <code>$index</code>.

This method is suitable for the collections of objects.

Please, take into account that this custom filter should be the first one in the list of all filters applied (orderBy etc.) and it will add the additional property <code>index</code> (the name is customizable) into the each object of the collection.

blocks|key|116040|text|我本可以只留下一个评论，但我没有“名气”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116041|迈尔的解决方案也正是我所需要的。回答pkozlowski.opensource的问题:当你有一个嵌套的ngRepeat，一个动态列表(例如，你允许移除的地方)，或者两者都有(我的例子)，使用$index是不起作用的，因为在排序之后，它将是后端数据的错误索引，并且使用ngInit缓存值也不起作用，因为当列表改变时，它不会被重新评估。|offset|length|style|CODE|116042|请注意，mile的解决方案允许通过传递参数<tr+ng-repeat="item+in+items+%7C+index:'originalPosition'+%7C+orderBy:'Store.storeName'">来自定义附加的索引属性名称|116043|我的调整后的版本：|116044|.filter(+'repeatIndex',+function+repeatIndex()
{
//+This+filter+must+be+called+AFTER+'filter'ing+
//++and+BEFORE+'orderBy'+to+be+useful.
++++return(+function(+array,+index_name+)
++++{
++++++++index_name+=+index_name+%7C%7C+'index';
++++++++array.forEach(+function(+each,+i+)
++++++++{each[+index_name+]+=+i;});
++++++++return(+array+);
++++});
})|code-block|syntax|javascript|116045|entityMap^0|0|1F|8|2N|6|3P|6|0|L|2D|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

I would've just left a comment, but I don't have the "reputation".

mile's solution is exactly what I needed too. To answer pkozlowski.opensource's question: when you have either nested <code>ngRepeat</code>s, a dynamic list (e.g. where you allow removals), or both (which is my case), using <code>$index</code> does not work because it will be the wrong index for the back-end data after sorting and using <code>ngInit</code> to cache the value does not work either because it's not re-evaluated when the list changes.

Note that mile's solution allows for the attached index property name to be customized by passing a parameter <code>&lt;tr ng-repeat="item in items | index:'originalPosition' | orderBy:'Store.storeName'"&gt;</code>

My tweaked version:

<pre><code>.filter( 'repeatIndex', function repeatIndex()
{
// This filter must be called AFTER 'filter'ing 
// and BEFORE 'orderBy' to be useful.
 return( function( array, index_name )
 {
 index_name = index_name || 'index';
 array.forEach( function( each, i )
 {each[ index_name ] = i;});
 return( array );
 });
})
</code></pre>

blocks|key|333552|text|我开始学习angular，并遇到了类似的问题，基于@pkozlowski-opensource的答案，我只是用下面这样的东西解决了它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|333553|<a>
++<img+src="img/delete.png"+ng-click="removeItem(items.indexOf(item))">
++{{items.indexOf(item)}}
</a>+|code-block|syntax|javascript|333554|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I started to learn angular and faced similar trouble, and based on the answer of @pkozlowski-opensource, I solved it just with something like

<pre><code>&lt;a&gt;
 &lt;img src="img/delete.png" ng-click="removeItem(items.indexOf(item))"&gt;
 {{items.indexOf(item)}}
&lt;/a&gt; 
</code></pre>

blocks|key|116136|text|如果有人需要使用$index，您可以为排序/过滤后的数组命名：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|116137|<tr+ng-repeat="item+in+sortedItems+=+(items+%7C+orderBy:'Store.storeName')+track+by+$index">|code-block|syntax|javascript|116138|请参阅我的答案here。|116139|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/45278243/5268014^0|8|6|0|0|7|4|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

In case someone needs to use <code>$index</code>, you can give a name to the sorted / filtered array :

<pre><code>&lt;tr ng-repeat="item in sortedItems = (items | orderBy:'Store.storeName') track by $index"&gt;
</code></pre>

See my answer <a href="https://stackoverflow.com/a/45278243/5268014">here</a>.

I am new to Angular.js and have some problems sorting my array and working on that sorted data.

I have a list with items and want so sort it by "Store.storeName", which is working so far. But after sorting the data, my delete-function is not working anymore. I think thats because the $index is wrong after sorting, and so the wrong data is deleted. 

How can I solve that? Ordering the data in the scope and not in the view? How to do that?

Here is some relevant code:

In the View:

<pre><code>&lt;tr ng-repeat="item in items | orderBy:'Store.storeName'"&gt;
 &lt;td&gt;&lt;input class="toggle" type="checkbox" ng-model="item.Completed"&gt;&lt;/td&gt;
 &lt;td&gt;{{item.Name}}&lt;/td&gt;
 &lt;td&gt;{{item.Quantity}} Stk.&lt;/td&gt;
 &lt;td&gt;{{item.Price || 0 | number:2}} €&lt;/td&gt; 
 &lt;td&gt;{{item.Quantity*item.Price|| 0 | number:2}} €&lt;/td&gt;
 &lt;td&gt;{{item.Store.storeName}}&lt;/td&gt; 
 &lt;td&gt;&lt;a&gt;&lt;img src="img/delete.png" ng-click="removeItem($index)"&gt;{{$index}}&lt;/a&gt;&lt;/td&gt;
 &lt;/tr&gt;
</code></pre>

And in my controller I have this delete function, which should delete the specific data:

<pre><code>$scope.removeItem = function(index){
 $scope.items.splice(index,1);
 }
</code></pre>

This works nicely before ordering in the View. 
If something important is missing, please let me now.

Thanks!

Angularjs wrong $index after orderBy

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是Angular.js新手，在对数组进行排序和处理已排序的数据时遇到了一些问题。我有一个项目的列表，并希望按"Store.storeName“对其进行排序，到目前为止，它是有效的。但是在对数据进行排序之后，我的delete函数就不再起作用了。我认为这是因为排序后的$index是错误的，所以错误的数据被删除了。我该如何...

问orderBy之后Angularjs错误的$index
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问orderBy之后Angularjs错误的$indexEN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问orderBy之后Angularjs错误的$index
EN