$ index объекта в массиве при использовании ng-repeat и фильтра

Im довольно новичок в angular и смог немного обойтись. Но я не могу найти ответ на этот сценарий...

У меня есть массив объектов, которые я сбрасываю с firebase. Я использую ng-repeat для объектов, а затем отображаю данные соответствующим образом. Я пытаюсь передать индекс как маршрутизатор в контроллер редактирования. В этом случае я хотел бы вытащить данные объекта, как можно было бы ожидать. Однако, когда я фильтрую 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>

Ответ 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>

Теперь также кажется, что такая информация больше похожа на идентификатор, чем на что-либо еще. Надеюсь, это уже часть записи, и вы можете привязываться к ней вместо использования индекса.

Ответ 2

Попробуйте следующее:

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

indexOf всегда возвращает исходный индекс в ng-repeat

Демо

Ответ 3

Вы можете использовать функцию для возврата индекса из массива

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

В моем примере у меня есть массив объектов, называемых "сообщениями", на которых я использую фильтр, чтобы упорядочить их по одному из своих свойств (свойство "upvotes" ). Затем в атрибуте "href" я вызываю функцию "getPostIndex", передавая ей по ссылке, текущий объект.

Функция getPostIndex() просто возвращает индекс из массива с помощью метода indexOf() массива Javascript.

Приятная вещь в том, что это решение не привязано к определенному фильтру (например, в ответе @holographix) и будет работать для всех них.

Ответ 4

Я просто наткнулся на ту же проблему, и я нашел этот supertrick на 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

Ответ 5

Вы можете ввести $route и использовать $route.current.params.index для получения значения.

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

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

});