web-dev-qa-db-ja.com

ng-repeatとフィルターを使用しているときの配列内のオブジェクトの$ index

かなり新しいangularであり、ある程度回避することができました。しかし、このシナリオへの答えを見つけることができないようです...

オブジェクトの配列があり、それを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>
javascriptarraysangularjsangularjs-ng-repeat
15
lutonmedia

残念ながら $index は、 "反復要素の反復子オフセット（0..length-1）"のみです

元のインデックスが必要な場合は、フィルタリングする前にそれをコレクションに追加するか、要素をまったくフィルタリングしないでください。

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のようです。それがレコードの一部であり、インデックスを使用する代わりにバインドできることを願っています。

11
Josh

これを試して ：

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

indexOfは常にng-repeatの元のインデックスを返します

デモ

33
Manas

関数を使用して、配列からインデックスを返すことができます

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

私の例では、「ポスト」と呼ばれるオブジェクトの配列があり、その上でフィルターを使用して、それらのプロパティの1つ（「投票」プロパティ）で並べ替えます。次に、「href」属性で「getPostIndex」関数を呼び出して、現在のオブジェクト参照を渡します。

GetPostIndex（）関数は、Javascript配列indexOf（）メソッドを使用して、配列からインデックスを単に返します。

これのいいところは、このソリューションが特定のフィルター（@holographix answerのような）に結び付けられておらず、すべてのフィルターで機能することです。

6
watsabitz

私はちょうど同じ問題に出くわしましたが、私は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

3
holographix

$routeを挿入し、$route.current.params.indexを使用して値を取得できます。

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

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

});
0
Awakening