2013-11-21 1 views
13

まったく新しい角度になっていて、やや乗り越えることができました。しかし、私はこのシナリオの答えを見つけることができないようです...

私はfirebaseからプルダウンしているオブジェクトの配列を持っています。私はオブジェクトにng-repeatを使用していて、それに応じてデータを表示しています。私は、 "edit"コントローラへのルーティングパラームとしてインデックスを渡そうとしています。この場合、私はオブジェクトデータを予想どおりに取得したいと考えています。しかし、私が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> 
+2

ではなく、 '{{$インデックスの' '{{インデックス}}もしかして返します}} '? – elclanrs

答えて

10

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

+0

と、文字列の配列を反復処理する場合はどうすればよいですか?それに属性(インデックス)を追加することはできません。 – vlio20

0

$routeを注入し、$route.current.params.indexを使用して値を取得することができます。

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

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

}); 
3

私はちょうど同じ問題を偶然見つけ、あなたは私のようなトラブルになら、私はそれを与える

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

ようagular Gitの問題

items.length - $index - 1 

にこのsupertrickを見つけましたショット:

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

+0

フィルタを使用しない場合は、これが最適なソリューションになります。フィルターがインデックスを壊してしまいます。 –

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 
} 

からインデックスを返す関数を使用することができますそれらのプロパティの1つ( "upvotes"プロパティ)でそれらを並べ替えることができます。次に、 "href"属性では、という参照でを渡して "getPostIndex"関数を呼び出します。現在のオブジェクトです。

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

これは、この解決策が特定のフィルタ(@holographix answerのような)に縛られておらず、それらのすべてに対してうまくいくということです。

30

これを試してみてください:

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

のindexOfは常にNG-繰り返しで元のインデックス

Demo

関連する問題