Question

我在<tr>上使用了ng-repeat来根据ng-repeat的过滤器在表格中创建行，并按ng-repeat="patent in patents | searchFilter"排序。

现在，我尝试通过实现item.select = true之类的操作来实现“shift”点击和“Ctrl”点击的选择行。

<tr>中的项目索引与$ index无法协调。

是否有人知道如何在{$ 1}}等$ index的帮助下选择<tr>的项目。

查看：

$("#patientsTb tr")[$index].pickItem()

控制器：

<table id="patientsTb" class="table table-condensed table_back" style="min-width:370px; overflow:scroll;">
                    <tr ng-repeat="patient in patients | orderBy:sortType:sortReverse | filter:{isPatientSeen: patientDetailView} | filter:searchPatient"
                        ng-click="editPatient(patient,$index,$event)"
                        ng-class="{'selected':patient.selected}">
                        @*<td><input type="checkbox" ng-model="patient.selected" ng-click="chkUnchkRow(patient,$event)" ng-disabled="isDataLoading || isEditPatient" />&nbsp;&nbsp;{{$index+1}}</td>*@
                        <td style="padding-left:5px;">{{patient.accountNumber}}</td>
                        <td style="padding-left:15px;">{{patient.medicalRecordNumber}}</td>
                        <td ng-show="siteType=='HL'" style="padding-left:10px;">{{patient.encounterCount}}</td>
                        <td style="padding-left:20px;">{{patient.patientLastName}}</td>
                        <td style="padding-left:20px;">{{patient.patientFirstName}}</td>
                        <td style="padding-left:20px;">{{patient.note}}</td>
                    </tr>
                </table>

Answer 1

您可以创建一个维护所选行数组的服务，并公开一些帮助方法，这些方法可以切换行并检查它们是否被选中。然后，您可以在控制器中使用此服务并进行查看。

<强> RowService

angular.module('rowSelect').service('RowService', RowService);

function RowService () {
  var self = this,
      selectedRows = [];

  self.toggleRow = toggleRow;
  self.isSelected = isSelected;

  function toggleRow (index) {
    if (self.isSelected(index)) {
      selectedRows.splice(selectedRows.indexOf(index), 1);
    } else {
      selectedRows.push(index);
    }
  } 

  function isSelected (index) {
    return !!~selectedRows.indexOf(index);
  }
}

<强>控制器

angular.module('rowSelect').controller('MainController', MainController);

function MainController ($scope, RowService) {
  $scope.toggleRow = RowService.toggleRow;
  $scope.isSelected = RowService.isSelected;
}

查看

<tr ng-repeat="item in items | searchFilter" ng-class="{'active':isSelected($index)}" ng-click="toggleRow($index)"> </tr>

Answer 2

对我来说，你可以尝试的，没有任何JQuery代码或索引用法，可以执行以下操作：

<强> HTML

<tr ng-repeat="item in items | searchFilter" 
    ng-class="{'active':item.selected}" 
    ng-click="item.selected = !item.selected">
</tr>

这样，每次点击一个元素时，都会设置selected preoperty。现在，您可以使用selected道具来检索已选择（或不是）的项目列表

如何使用$ index协调ng-repeat中的项目

2 个答案: