如何正确地循环/ng重复嵌套的对象/数组

Question

我正在使用角度ng-repeat，我查找或尝试的任何内容都不起作用，我不明白为什么。我正在"循环"公司用户，并希望显示所有名字。任何帮助都会很棒！多谢！！

<div ng-app="app" ng-controller="appCtrl">
<div ng-repeat="user in companies.users">
<p>{{user.firstName}}</p>
<div>

app.controller('appCtrl', function($scope){
    $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
            firstName: 'Alex',
            lastName: 'D',
            number: 1234
        }, {
            firstName: 'Sarah',
            lastName: 't',
            number: 14
        }, {
            firstName: 'J',
            lastName: 'd',
            number: 07
        }]
    }, {
        name: 'The Best Company Elegant',
        users: [{
            firstName: 'Alx',
            lastName: 'B',
            number: 1234
        }, {
            firstName: 'Seth',
            lastName: 'w',
            number: 12
        }, {
            firstName: 'J.S',
            lastName: 'B',
            number: 7
        }]
    }, {
        name: 'The Best Company by Julia',
        users: [{
            firstName: 'Aleddddx',
            lastName: 'l',
            number: 1234
        }, {
            firstName: 'Maggy',
            lastName: 'n',
            number: 1
        }, {
            firstName: 'Ja',
            lastName: 'Key',
            number: 123
        }]
    }]
});

Answer 1

您可以使用

嵌套ng-repeat来实现此目的。

<div ng-repeat="company in companies">
  <div ng-repeat="user in company.users">
    <p>{{user.firstName}}</p>
  </div>
<div>

请参考以下示例：

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.companies = [{
      name: 'The Best Company Denim',
      users: [{
        firstName: 'Alex',
        lastName: 'D',
        number: 1234
      }, {
        firstName: 'Sarah',
        lastName: 't',
        number: 14
      }, {
        firstName: 'J',
        lastName: 'd',
        number: 07
      }]
    }, {
      name: 'The Best Company Elegant',
      users: [{
        firstName: 'Alx',
        lastName: 'B',
        number: 1234
      }, {
        firstName: 'Seth',
        lastName: 'w',
        number: 12
      }, {
        firstName: 'J.S',
        lastName: 'B',
        number: 7
      }]
    }, {
      name: 'The Best Company by Julia',
      users: [{
        firstName: 'Aleddddx',
        lastName: 'l',
        number: 1234
      }, {
        firstName: 'Maggy',
        lastName: 'n',
        number: 1
      }, {
        firstName: 'Ja',
        lastName: 'Key',
        number: 123
      }]
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div ng-repeat="company in companies">
    <div ng-repeat="user in company.users">
      <p>{{user.firstName}}</p>
    </div>
  </div>
</div>

Answer 2

像这样： https://codepen.io/sheriffderek/pen/944e812b0cd218f2a7990fad8bcafc5d/？

标记

<section ng-app="myApp" ng-controller="myCtrl">
    <ul class="company-list">
        <li class="company" ng-repeat="company in companies">
            {{company.name}}
            
            <ul class="person-list">
                <li class="person" ng-repeat="person in company.users">
                    {{person.firstName}}
                </li>
            </ul>
        </li>
    </ul>
</section>

脚本

var companiesArray = [
    {
        name: 'The Best Company Denim',
        users: [
            {
                firstName: 'Alex',
                lastName: 'D',
                number: 1234
            }, {
                firstName: 'Sarah',
                lastName: 't',
                number: 14
            }, {
                firstName: 'J',
                lastName: 'd',
                number: 07
            }
        ],
    }, {
      ...
    },
];
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.companies = companiesArray;
});