使嵌套的 ng-repeat 数据范围特定于当前项目

Question

我正在有效地尝试使用两个嵌套的 table 创建主从类型视图。要求是查看摘要记录列表（主），然后 "drill-down" 如果需要，进入该摘要的详细信息。详细信息将显示在其（主）摘要记录下方的 table 中，但前提是用户单击按钮查看详细信息。我们不想在页面加载时获取所有摘要的所有详细信息。详细数据只能通过 Restful 服务获取并在单击摘要记录时显示。

我在前端使用 AngularJs，在后端使用 ASP.Net 数据服务，使用 Restful 接口。

我的视图如下所示（片段）：

<table class="table table-responsive table-hover">
            <thead>
            <tr>
                <th>ProcessorId</th>
                <th>Processor</th>
                <th>Oldest</th>
                <th>Newest</th>
                <th>Qty</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat-start="summary in vm.summaries">
                <td>{{summary.ProcessorId}}</td>
                <td>{{summary.ProcessorDescription}}</td>
                <td>{{summary.OldestTransaction | date: vm.dateFmt}}</td>
                <td>{{summary.NewestTransaction | date: vm.dateFmt}}</td>
                <td>{{summary.QtyItemsInQueue}}</td>
            </tr>
            <tr ng-repeat-end>
                <td colspan="4">
                    <table class="table table-responsive table-hover">
                        <thead>
                        <tr><th>Meter</th><th>Amount</th><th>Requested</th><th>Session</th><th>Trxn No.</th></tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="item in vm.salesQueueDetails">
                            <td>{{item.MeterSerialNumber}}</td>
                            <td>{{item.Amount}}</td>
                            <td>{{item.ReqDateTime | date: vm.dateFmt}}</td>
                            <td>{{item.SessionNumber}}</td>
                            <td>{{item.TransactionNumber}}</td>
                        </tr>
                        </tbody>
                    </table>
                </td>
                <td><button class="btn" type="button" ng-click="vm.getSalesQueueDetail(summary.ProcessorId)">details for {{summary.ProcessorId}}</button></td>
            </tr>
            </tbody>
        </table>

vm.summaries 由控制器在启动时加载，没有问题。

当我单击详细信息按钮为所选 ID 调用 vm.getSalesQueueDetail 时出现问题。然后为每个摘要 (master/parent) 记录重复生成的数据，而不仅仅是单击它的主记录。

如何将我的详细信息数据绑定到它对应的摘要 (master/parent) 记录？

Answer 1

在您的第二个 ng-repeat 中，您应该将数据分配给当前摘要，而不是像这样全局分配数据：

<tr ng-repeat="item in summary.salesQueueDetails">

然后在您的控制器中，您应该将详细信息分配给摘要，例如：

$scope.getSalesQueueDetail = function(summary){
    ...after getting the data
    summary.salesQueueDetails = data;
}

希望对您有所帮助=)

使嵌套的 ng-repeat 数据范围特定于当前项目

Make nested ng-repeat data scope specific to current item

angularjs

ng-repeat