Question

例如，如果我有数组：

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

当我使用ngRepeat进行迭代时如何获取用户名？

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

谢谢！

Answer 1

首先，数组不能有自定义键。所以我想你正在使用对象$ scope.users。

要获得答案，您可以这样做：用户“ ng-repeat =”（姓名，用户）“

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

Answer 2

1）您的代码中有错误：您的数组应该是一个对象，因为它有键John, Paul ...

2）ngRepeat iterate over object properties like (key, value) in obj你可以https://plnkr.co/edit/BTCxfk

以下是工作示例：

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 3

您可以使用Object.keys(users)来获取值为''Paul'，'John']

的数组

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

这未经过测试，但我认为它应该符合您的需求。

在AngularJS ngRepeat指令中获取集合名称

3 个答案: