Question

我有两个角度表使用相同的控制器，但在不同的视图上。表A列出了作业。表B列出了ChangeOrders。当用户单击表A上的作业时，表B只需显示与该作业一起使用的ChangeOrders。每个ChangeOrder都有一个JobId作为外键。

表A

<table class=" table table-bordred table-striped table-hover" ng-table="tableParams" show-filter="true">
                    <tr ng-repeat="job in $data" class="pointer">
                        <td  data-title="'Job Number'" sortable="'JobNumber'" filter="{ 'JobNumber': 'text' }">{{job.JobNumber}}</td>
                        <td  data-title="'Job Name'" sortable="'JobName'" filter="{ 'JobName': 'text' }">{{job.JobName}}</td>
                    </tr>
                </table>

表B

<table class=" table table-bordred table-striped table-hover" ng-table="tableParams" show-filter="true" >
        <tr ng-repeat="job in $data"  class=" pointer">
            <td ng-click="editChangeOrderModal(job)" data-title="'CO Number'" sortable="'ChangeOrderNumber'" filter="{ 'ChangeOrderNumber': 'text' }">{{job.ChangeOrders[0].ChangeOrderNumber}}</td>
            <td data-title="'CO Date'" sortable="'ChangeOrderDate'" filter="{ 'ChangeOrderDate': 'text' }">{{job.ChangeOrders[0].ChangeOrderDate | date : date : shortDate}}</td>
            <td data-title="'CO Name'" sortable="'ChangeOrderName'" filter="{ 'ChangeOrderName': 'text' }">{{job.ChangeOrders[0].ChangeOrderName}}</td>
            <td data-title="'CO Description'" sortable="'ChangeOrderDescription'" filter="{ 'ChangeOrderDescription': 'text' }">{{job.ChangeOrders[0].ChangeOrderDescription}}</td>
            <td data-title="'CO Amount'" sortable="'ChangeOrderAmount'" filter="{ 'ChangeOrderAmount': 'text' }">${{job.ChangeOrders[0].ChangeOrderAmount | number : fractionSize}}</td>
            <td data-title="'CO ApprovedDate'" sortable="'ChangeOrderApprovedDate'" filter="{ 'ChangeOrderApprovedDate': 'text' }">{{job.ChangeOrders[0].ChangeOrderApprovedDate | date : date : shortDate}}</td>
            <td data-title="'CO ApprovedAmount'" sortable="'ChangeOrderApprovedAmount'" filter="{ 'ChangeOrderApprovedAmount': 'text' }">${{job.ChangeOrders[0].ChangeOrderApprovedAmount | number : fractionSize}}</td>
            <td data-title="'CO ApprovedNumber'" sortable="'ChangeOrderApprovedNumber'" filter="{ 'ChangeOrderApprovedNumber': 'text' }">{{job.ChangeOrders[0].ChangeOrderApprovedNumber}}</td>
            <td data-title="'CO Attn'" sortable="'ChangeOrderAttn'" filter="{ 'ChangeOrderAttn': 'text' }">{{job.ChangeOrders[0].ChangeOrderAttn}}</td>
        </tr>
    </table>

Answer 1

即使这两个视图具有相同的控制器，它们也具有该控制器的不同实例，因此它们不共享任何数据。在控制器之间共享数据的正确方法是使用services或$ rootScope。

单击该行时，您需要设置所选作业。

<tr ng-repeat="job in jobs" ng-click="selectJob(job)">
    <!-- job stuff here -->
</tr>

在控制器中，您需要在服务中设置单击的作业（或者对于此示例为$ rootScope）

$scope.selectJob = function(job) {
  $rootScope.selectedJob = job;
};

然后您需要一个功能来获取当前所选的作业（这样您就可以显示更改订单）。

$scope.selectedJob = $scope.selectedJob = function() {
  return $rootScope.selectedJob;
};

对于您的变更单表格，ng-repeat只需要退出所选择的作业。

<tr ng-repeat="changeOrder in selectedJob().changeOrders">
    <td>{{changeOrder.name}}</td>
    <td>{{changeOrder.number}}</td>
</tr>

现在选择一个作业行将在另一个表中显示相应的变更单。我把一个小例子here放在一起。如果这有助于你，请告诉我们！

如何使用第二个表行选择过滤角表行

1 个答案: