Question

我正在尝试使用两个嵌套表创建一个主细节类型视图。要求是查看摘要记录列表（主记录），然后根据需要“深入”查看摘要的详细信息。详细信息将显示在其（主）摘要记录下方的表格中，但前提是用户单击按钮以查看详细信息。我们不希望获取有关页面加载的所有摘要的所有详细信息。详细信息的数据必须仅通过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时，问题就出现了。然后，对每个摘要（主/父）记录重复生成的数据，而不仅仅是单击它的主记录。

如何将我的详细信息数据的绑定仅限制在相应的摘要（主/父）记录中？

Answer 1

在您的第二次重复重复中，您应该将数据分配给当前摘要，而不是全局分配：

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

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

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

希望有帮助=）

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

1 个答案: