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

时间:2013-11-21 03:02:07

标签: javascript arrays angularjs angularjs-ng-repeat

我是一个相当新的角度,并能够有点左右。但我似乎无法找到这种情况的答案......

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

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

路线在上面,控制器在

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

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

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

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

5 个答案:

答案 0 :(得分:33)

试试这个:

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

indexOf始终返回ng-repeat

中的原始索引

Demo

答案 1 :(得分:11)

不幸的是$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 :(得分:6)

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

<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答案),并且适用于所有这些过滤器。

答案 3 :(得分:3)

我偶然发现了同样的问题,我在agular 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 :(得分:0)

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

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

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

});