使用ng-repeat和过滤器时，$ Array in Array in Array

Im fairly new to angular and have been able to get around somewhat. But I cant seem to find the answer to this scenario...

我是一个相当新的棱角分明，并且能够在某种程度上解决。但我似乎无法找到这种情况的答案......

I have an array of objects, which I am pulling down from firebase. I am using an ng-repeat for the objects, then displaying data accordingly. I am trying to pass the index as a routeparam to an "edit" controller. In which case I would like to pull the object data as one would anticipate. However, when I filter the ng-repeat I am getting the index of the filtered content. where am I going wrong in finding the true index?

我有一系列对象，我从firebase中拉下来。我正在对对象使用ng-repeat，然后相应地显示数据。我试图将索引作为routeparam传递给“编辑”控制器。在这种情况下，我想像预期的那样拉取对象数据。但是，当我过滤ng-repeat时，我得到过滤内容的索引。找到真正的指数我在哪里错了？

  .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
  .when('/profiles/:index', {
    templateUrl: '../views/profile.html',
    controller: 'profileCtrl'
  });

Route is above, Controller is below

路线在上面，控制器在下面

  .controller('profileCtrl', function( $scope, $routeParams ){

$scope.teamProfile = $scope.ourTeam[$routeParams.index];
    $scope.index = $routeParams.index;
});

And finally the snippet of html from within the repeat.

最后是重复内容的html片段。

<div class="profileName"><a href="/profiles/{{$index}}">{{member.name}}</a><span class="handle">{{member.handle}}</span></div>

5 个解决方案

#1

Unfortunately $index is only the "iterator offset of the repeated element (0..length-1)"

不幸的是，$ index只是“重复元素的迭代器偏移量（0..length-1）”

If you want the original index you would have to add that to your collection before filtering, or simply not filter the elements at all.

如果您想要原始索引，则必须在过滤之前将其添加到集合中，或者根本不过滤元素。

One possible approach:

一种可能的方法：

angular.forEach(members, function(member, index){
   //Just add the index to your item
   member.index = index;
});

<div ng-repeat="member in members">
   <a href="/profiles/{{member.index}}">
</div>

Now, it also seems that this kind of information is really more like an ID than anything else. Hopefully that is already part of the record, and you can bind to that instead of using the index.

现在，似乎这种信息实际上更像是一个ID而不是其他任何东西。希望这已经是记录的一部分，你可以绑定到它而不是使用索引。

#2

Try this :

尝试这个：

<div ng-repeat="member in members">
{{members.indexOf(member)}}
</div>

indexOf always returns the original index in an ng-repeat

indexOf始终返回ng-repeat中的原始索引

Demo

演示

#3

You could use a function to return the index from the array

您可以使用函数从数组中返回索引

<div ng-repeat="post in posts | orderBy: '-upvotes'">
   <a href="#/posts/{{getPostIndex(post)}}"></a> 
</div>

And the function

和功能

$scope.getPostIndex = function (post) {
    return $scope.posts.indexOf(post); //this will return the index from the array
}

On my example I have an array of objects called "posts", on which I use a filter to order them by one of their properties ("upvotes" property). Then, in the "href" attribute I call "getPostIndex" function by passing it by reference, the current object.

在我的例子中，我有一个名为“posts”的对象数组，我在其上使用过滤器通过其中一个属性（“upvotes”属性）对它们进行排序。然后，在“href”属性中，我通过引用传递它来调用“getPostIndex”函数，即当前对象。

The getPostIndex() function simply returns the index from the array by using Javascript array indexOf() method.

getPostIndex（）函数只是使用Javascript数组indexOf（）方法从数组中返回索引。

The nice thing about this is that this solution is not tied to a specific filter (like in @holographix answer) and will work for all of them.

关于这一点的好处是这个解决方案不依赖于特定的过滤器（如@holographix答案），并且适用于所有这些过滤器。

#4

I just stumbled across the same problem and I found this supertrick on the agular git issues

我偶然发现了同样的问题，我发现了这个关于gular git问题的超级问题

items.length - $index - 1

喜欢

    <div ng-repeat="item in ['item', 'item', 'item'] | reversed">
      <!-- Original index: 2, New index: 0 -->
      <p>Original index: {{items.length - $index - 1}}, New index: {{$index}}</p>
      <!-- Original index: 1, New index: 1 -->
      <p>Original index: {{items.length - $index - 1}}, New index: {{$index}}</p>
      <!-- Original index: 0, New index: 2 -->
      <p>Original index: {{items.length - $index - 1}}, New index: {{$index}}</p>
    </div>

if you're in trouble like me give it a shot:

如果你像我一样遇到麻烦，试一试：

https://github.com/angular/angular.js/issues/4268

#5

You can inject $route and use $route.current.params.index to get the value.

您可以注入$ route并使用$ route.current.params.index来获取值。

.controller('profileCtrl', function( $scope, $route ) {

     $scope.index = $route.current.params.index;

});

#1