asp.net-mvc如何筛选角表行与第二个表行选择

发布时间: 2017/3/25 1:46:37
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

有两个角的表使用相同的控制器,但在不同的意见。表 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>

解决方法 1:

虽然这两种观点有相同的控制器,他们会有该控制器的不同实例,所以它们不会透露任何数据。控制器之间共享数据的正确方法使用服务或 $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;
};

为你改变订单表,吴重复只是需要去上那所选作业。

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

现在选择工作行将另一个表中显示相应的变更。 我放在一起的一个小例子在这里。让我知道如果这能帮助你 !

赞助商