bekommen den Namen der Sammlung in AngularJS ngRepeat Richtlinie

Question

Wenn ich zum Beispiel das Array:

$scope.users = [ 
    John: { 
     age: 18, 
     genre: 'male', 
     type: 'admin' 
    }, 
    Paul: { 
     age: 22, 
     genre: 'male', 
     type: 'admin' 
    } 
]; 

Wie kann ich die Benutzer-Namen, wenn ich mit ngRepeat iterieren?

<li ng-repeat="user in users"> 
    {{ }} <!-- Name Here --> 
    {{ user.age }} <br> 
    {{ user.genre }} <br> 
    {{ user.type }} 
</li> 

Vielen Dank!

Answer 1

1) Sie haben Fehler im Code: Ihr Array sollte ein Objekt, da es Schlüssel John, Paul ...

2) In ngRepeat hat, können Sie iterate over object properties like (key, value) in obj

Hier arbeiten Beispiel:

angular.module('myApp', []) 
 
.controller('MyCtrl', ['$scope', function MyCtrl($scope) { 
 
    var ctrl = this; 
 
    
 
    ctrl.users = { 
 
     John: { 
 
      age: 18, 
 
      genre: 'male', 
 
      type: 'admin' 
 
     }, 
 
     Paul: { 
 
      age: 22, 
 
      genre: 'male', 
 
      type: 'admin' 
 
     } 
 
    }; 
 
    
 
    
 
}]);

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.angularjs.org/1.6.2/angular.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl as $ctrl"> 
 
    <ul> 
 
     <li ng-repeat="(key, user) in $ctrl.users track by $index"> 
 
     {{ key }} 
 
     {{ user.age }} <br> 
 
     {{ user.genre }} <br> 
 
     {{ user.type }} 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

können Sie Object.keys(users) verwenden, um ein Array mit den Werten zu erhalten [ ‚Paul‘, ‚John‘]

<li ng-repeat="user in users track by $index"> 
    {{ Object.keys(users)[$index] }} 
    {{ user.age }} <br> 
    {{ user.genre }} <br> 
    {{ user.type }} 
</li> 

nicht getestet, aber ich denke, dass es entlang der Linien sein sollten, was Sie brauchen.

Answer 3

Zunächst können Arrays keine benutzerdefinierten Schlüssel haben. Ich nehme an, dass Sie das Objekt $ scope.users verwenden.

Für Antwort, können Sie dies tun: ng-repeat = "(Name, Benutzer) in Benutzer"

https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties