使用 ng-repeat 和过滤器时数组中对象的 $index

Posted 2023-02-22

【中文标题】使用 ng-repeat 和过滤器时数组中对象的 $index

【英文标题】：$index of Object in Array while using ng-repeat and a filter

【发布时间】：2013-12-05 08:55:51

【问题描述】：

我对 Angular 相当陌生，并且已经能够在一定程度上解决问题。但我似乎无法找到这种情况的答案......

我有一组对象，我正在从 firebase 中提取它们。我对对象使用 ng-repeat，然后相应地显示数据。我正在尝试将索引作为路由参数传递给“编辑”控制器。在这种情况下，我想按预期提取对象数据。但是，当我过滤 ng-repeat 时，我得到了过滤内容的索引。我在找到真正的索引时哪里出错了？

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

Route 在上面，Controller 在下面

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

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

最后是从内部重复的 html 的 sn-p。

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

【问题讨论】：

您的意思是index 而不是$index？

【参考方案1】：

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

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

一种可能的方法：

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>

现在看来，这种信息真的更像是一个 ID，而不是其他任何东西。希望这已经是记录的一部分，您可以绑定到该记录而不是使用索引。

【讨论】：

如果您正在遍历字符串数组怎么办？您将无法为其添加属性（索引）。

【参考方案2】：

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

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

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

);

【参考方案3】：

我刚刚偶然发现了同样的问题，我发现了这个关于 Angular 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>

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

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

【讨论】：

如果您不使用过滤器，这将是最好的解决方案。过滤器会搞砸你的索引。

【参考方案4】：

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

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

还有功能

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

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

getPostIndex() 函数简单地使用 javascript 数组 indexOf() 方法从数组中返回索引。

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

【参考方案5】：

试试这个：

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

indexOf 总是在 ng-repeat 中返回原始索引

Demo