Javascript 如何在单击按钮时从嵌套的JSON数组数据创建嵌套的ng repeat

以下面的

JSON

为例，假设我已将此数据设置为

$scope.people

：

[
    {
        "personId": 1,
        "name": "Thomas",
        "age": 39
        "friends": [
            {
                "friendId": 1,
                "nickName": "Lefty"
            },
            {
                "friendId": 2,
                "nickName": "Morty"
            },
            {
                "friendId": 3,
                "nickName": "Gomer"
            }
        ]
    },
    {
        "personId": 2,
        "name": "George",
        "age": 27,
        "friends": [
            {
                "friendId": 1,
                "nickName": "Tommy"
            },
            {
                "friendId": 2,
                "nickName": "Bobby"
            },
            {
                "friendId": 3,
                "nickName": "Joe"
            }
        ]
    }
]

我正在为每个人动态创建按钮

<div class="form-group" data-ng-repeat="person in people">
    <button type="button" class="btn btn-default form-control"
        data-ng-click="friends(person.personId)">
            {{person.name}}
    </button>
</div>

{{person.name}

我想弄清楚的是，如何根据单击的按钮将对象数据加载到引导面板（请参见下面的HTML）：

<div class="panel panel-primary" data-ng-hide="!friends">
    <div class="panel-heading">
        <h4 class="panel-title">{{person.name}}<span class="pull-right">{{person.age}}</span></h4>
    </div>
    <div class="panel-body">
        <table class="table table-striped">
            <tr data-ng-repeat="friend in person.friends">
                <td>{{$index + 1}}</td>
                <td>{{friend.nickName}}</td>
            </tr>
        </table>
    </div>
</div>

{{person.name}{{person.age}
{{$index+1}}
{{朋友.昵称}

---

我在想，在我的控制器上，我设置了一个

$scope

变量=friends数组（

$scope.friends

），但我不确定如何基于

personId

使用字典而不是数组： 使用下划线.js中的indexBy（）函数

然后你可以做类似的事情

$scope.peopleById = _.indexBy(people, "personId");

在html文件中

<tr data-ng-repeat="(id, friend) in person.friends">
<!-- here you can do peopleById[id] -->

---

您需要创建一个$scope变量来保存所选人员，并在单击按钮时为所选人员分配正确的人员

$scope.SelectMe = function (p) {
        $scope.selectedPerson = p;
    }

然后，您可以在填充面板时引用所选人员

我为你准备了一把小提琴

---

如果这是您需要的，请告诉我。

是的，但他想使用id来完成，不是吗？