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>

我在想我的控制器，我设置了一个$scope变量=朋友数组（$scope.friends），但我不确定如何根据personId做到这一点。

Answer 1

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

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

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

我为你准备了一个快速小提琴。 http://jsfiddle.net/cseignc/wt8w01b4/

请告诉我这是否是你需要的。

Answer 2

你可以使用字典而不是数组：使用underscore.js http://underscorejs.org/#indexBy

中的indexBy（）函数

然后你可以做类似

的事情

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

并在html文件中

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

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

2 个答案: