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

Question

使用以下 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>

我想要弄清楚的是如何根据单击的按钮将对象数据加载到 Bootstrap 面板中(参见下面的 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>

我在想，在我的 Controller 上，我设置了一个 $scope 变量 = friend 数组 ($scope.friends)，但我不确定具体如何设置根据 personId 执行此操作。

Answer 1

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

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

然后，您可以在填充面板时引用 selectedPerson

我已经为你整理了一个快速 fiddle 。 http://jsfiddle.net/cseignc/wt8w01b4/

请告诉我这是否是您所需要的。