How enable multiple row selection in angular js table

Question

I created html table and used ng-repeat to show items in table, but i can't select multiple rows in table. How can achieve this by using control key Thank you!

<div class="table_bg">
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-bordered dt-responsive nowrap res_table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>#</th>
            <th>Description</th>
            <th>Ali</th>
            <th> Extension</th>
            <th> Ext/th>
            <th>Comp</th>
        </tr>
    </thead>
    <tbody ng-hide="loading">
        <tr ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)" ng-repeat="docType in DocTypes" ng-cloak ng-mouseenter="hover(docType)" ng-mouseleave="hover(docType)">
            <td>{{$index}}</td>
            <td>

                {{docType.Desc}}
            </td>
            <td>{{docType.LI}}</td>
            <td>{{docType.Ext}}</td>
            <td>{{docType.EXT}}</td>
            <td>{{docType.Comp}}</td>
        </tr>
    </tbody>
</table>

Answer 1

I hope this is not too late for you, I have you answer.

You can use the $event.ctrlKey parameter to check if the user has pressed control.

Even better, there is a $event.shiftKey parameter to check if shift was pressed.

You can use it this way, (I let all the logic in a simple controller so that it is easier to understand but I advice you to put it inside a service). Also I have chosen to store only the rows index but it works the same with full rows.

HTML

<tr ng-repeat="row in rows track by $index" ng-click="selectRow($event, $index)" ng-class="{highlitedRow: isRowSelected($index)}">

AngularJS

var selectedRowsIndexes = [];
$scope.rows = [{name: 'Happy Butterfly'}, {name: 'Wonderful Bee'}];


$scope.selectRow = function(event, rowIndex) {
  if(event.ctrlKey) {
      changeSelectionStatus(rowIndex);
  } else if(event.shiftKey) {
      selectWithShift(rowIndex);
  } else {
      selectedRowsIndexes = [rowIndex];
  }
  console.log(selectedRowsIndexes);
  console.log(getSelectedRows());
  console.log(getFirstSelectedRow());
};

function selectWithShift(rowIndex) {
  var lastSelectedRowIndexInSelectedRowsList = selectedRowsIndexes.length - 1;
  var lastSelectedRowIndex = selectedRowsIndexes[lastSelectedRowIndexInSelectedRowsList];
  var selectFromIndex = Math.min(rowIndex, lastSelectedRowIndex);
  var selectToIndex = Math.max(rowIndex, lastSelectedRowIndex);
  selectRows(selectFromIndex, selectToIndex);
}

function getSelectedRows() {
  var selectedRows = [];
  angular.forEach(selectedRowsIndexes, function(rowIndex) {
    selectedRows.push($scope.rows[rowIndex]);
  });
  return selectedRows;
}

function getFirstSelectedRow() {
  var firstSelectedRowIndex = selectedRowsIndexes[0];
  return $scope.rows[firstSelectedRowIndex];
}

function selectRows(selectFromIndex, selectToIndex) {
  for(var rowToSelect = selectFromIndex; rowToSelect <= selectToIndex; rowToSelect++) {
    select(rowToSelect);
  }
}

function changeSelectionStatus(rowIndex) {
  if($scope.isRowSelected(rowIndex)) {
      unselect(rowIndex);
  } else {
      select(rowIndex);
  }
}

function select(rowIndex) {
  if(!$scope.isRowSelected(rowIndex)) {
      selectedRowsIndexes.push(rowIndex)
  }
}

function unselect(rowIndex) {
  var rowIndexInSelectedRowsList = selectedRowsIndexes.indexOf(rowIndex);
  var unselectOnlyOneRow = 1;
  selectedRowsIndexes.splice(rowIndexInSelectedRowsList, unselectOnlyOneRow);
}

function resetSelection() {
  selectedRowsIndexes = [];
}

$scope.isRowSelected = function(rowIndex) {
  return selectedRowsIndexes.indexOf(rowIndex) > -1;
};

});

Last thing, if you want to use powerfull tables, I recommend you ng-table.

If you use ng-table, be sure to add

$scope.$on('ngTableAfterReloadData', function() {
  resetSelection();
});

and replace $scope.rows[rowIndex] with $scope.tableParams.data[rowIndex]