Как фильтровать строку углового стола со вторым выбором строки таблицы

У меня есть две угловые таблицы, использующие один и тот же контроллер, но с отдельными видами. В таблице A приведен список рабочих мест. Таблица B содержит список ChangeOrders. Когда пользователь нажимает на Job в таблице A, таблица B должна показывать только ChangeOrders, которые идут с этим заданием. Каждый ChangeOrder имеет JobId как внешний ключ.

Таблица A

<table ng-table="tableParams" show-filter="true">
 <tbody><tr ng-repeat="job in $data">
 <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>
 </tbody></table>

Таблица B

<table ng-table="tableParams" show-filter="true">
 <tbody><tr ng-repeat="job in $data">
 <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>
 </tbody></table>
1 ответ

Хотя эти два представления имеют один и тот же контроллер, у них есть разные экземпляры этого контроллера, поэтому они не делят какие-либо данные. Правильный способ обмена данными между контроллерами - использование служб или $ rootScope.

При нажатии этой строки вам нужно установить выбранное задание.

<!-- job stuff here -->

В контроллере вам нужно будет установить это нажатие на задание в службе (или для этого примера $ rootScope)

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

Затем вам понадобится функция, чтобы получить текущее выбранное задание (чтобы вы могли отображать для него заказы на изменение).

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

Для вашей таблицы заказов изменений ng-repeat просто должен уйти от выбранного задания.

{{changeOrder.name}}
 {{changeOrder.number}}

Теперь, выбрав строку задания, вы увидите соответствующие заказы на изменение в другой таблице. Я собрал небольшой пример здесь. Дайте мне знать, если это поможет вам!

licensed under cc by-sa 3.0 with attribution.