javascript - objects - ng-repeat track by index




$index of Object in Array while using ng-repeat and a filter (4)

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?

  .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.

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

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

items.length - $index - 1

like

    <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


Try this :

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

indexOf always returns the original index in an ng-repeat

Demo


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

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

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

});

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.

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

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.





angularjs-ng-repeat