wake-up-neo.com

$ index of Object in Array bei Verwendung von ng-repeat und eines Filters

Ich bin ziemlich neu zu eckig und konnte mich etwas bewegen. Aber ich kann keine Antwort auf dieses Szenario finden ...

Ich habe eine Reihe von Objekten, die ich von Firebase herunterziehe. Ich verwende ein ng-repeat für die Objekte und zeige dann die Daten entsprechend an. Ich versuche, den Index als Routeparam an einen "Edit" -Controller zu übergeben. In diesem Fall möchte ich die Objektdaten wie erwartet abrufen. Wenn ich jedoch das ng-repeat filtern, erhalte ich den Index des gefilterten Inhalts. Wo bin ich falsch bei der Suche nach dem wahren Index?

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

Route ist oben, Controller ist unten

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

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

Und zum Schluss noch das HTML-Snippet aus der Wiederholung. 

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

Leider ist $index nur der "Iteratoroffset des wiederholten Elements (0..length-1)"

Wenn Sie den ursprünglichen Index erstellen möchten, müssen Sie ihn vor dem Filtern zu Ihrer Sammlung hinzufügen oder die Elemente einfach nicht filtern.

Ein möglicher Ansatz:

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>

Nun scheint es auch, dass diese Art von Informationen ist wirklich eher eine ID als alles andere. Hoffentlich ist dies bereits Teil des Datensatzes, und Sie können sich an diese Stelle halten, anstatt den Index zu verwenden.

11
Josh

Versuche dies :

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

indexOf gibt immer den ursprünglichen Index in einer Wiederholungswiederholung zurück

Demo

33
Manas

Sie können eine Funktion verwenden, um den Index aus dem Array zurückzugeben

<div ng-repeat="post in posts | orderBy: '-upvotes'">
   <a href="#/posts/{{getPostIndex(post)}}"></a> 
</div>

Und die Funktion

$scope.getPostIndex = function (post) {
    return $scope.posts.indexOf(post); //this will return the index from the array
}

In meinem Beispiel habe ich ein Array von Objekten, "posts" genannt, in dem ich sie mithilfe eines Filters nach einer ihrer Eigenschaften ordne ("upvotes" -Eigenschaft). Dann rufe ich im Attribut "href" die Funktion "getPostIndex" auf, indem ich durch Referenz das aktuelle Objekt übergeben.

Die getPostIndex () - Funktion gibt einfach den Index aus dem Array mithilfe der Javascript-Array-Methode indexOf () zurück. 

Das Schöne daran ist, dass diese Lösung nicht an einen bestimmten Filter gebunden ist (wie in @ holographix answer) und für alle funktionieren wird.

6
watsabitz

Ich stolperte gerade über das gleiche Problem und fand diesen Supertrick bei den Agular-Git-Problemen

items.length - $index - 1

mögen

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

wenn Sie in Schwierigkeiten sind wie ich, probieren Sie es aus:

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

3
holographix

Sie können $route injizieren und $route.current.params.index verwenden, um den Wert abzurufen.

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

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

});
0
Awakening