Is it possible to use shift and mouse click to select multiple elements on a table using AngularJS?

I have a table in which the first column is a checkbox and I would like to use SHIFT key and mouse click in order to select multiple rows continuously and can do things like delete, edit them etc.

Example by steps:

1. Click on 1st row's checkbox.
2. Hold down SHIFT key.
3. Click on 10th row's checkbox.

Result: the first 10 rows will be selected.

Does anyone know how this can be done using AngularJS?

Is it possible to use shift and mouse click to select multiple elements on a table using AngularJS?

I have a table in which the first column is a checkbox and I would like to use SHIFT key and mouse click in order to select multiple rows continuously and can do things like delete, edit them etc.

Example by steps:

1. Click on 1st row's checkbox.
2. Hold down SHIFT key.
3. Click on 10th row's checkbox.

Result: the first 10 rows will be selected.

Does anyone know how this can be done using AngularJS?

• javascript
• angularjs
• checkbox
• md-select

• 1 It's not a duplicate since he wants to do it with Angular - and jQuery is definitely not needed for this. A custom directive will do fine. – Fissio Commented Jan 27, 2017 at 13:34

3 Answers 3

I had a similar requirement. And while it's true that the proper way to update the checkboxes is by directly updating the model I wanted a more general solution.

So I built a pair of directives so I can reuse it on any checkbox list. Basically you wrap all the checkboxes with <multi-checkbox-container> and then add a multi-checkbox attribute to each checkbox. The code does the rest. Simple and easy.

angular
  .module('app', [])
  .controller('MainController', function($scope) {
    var vm = this;

    $scope.checks = {};
    $scope.botigues = [1, 2, 3, 4, 5, 6];

  })
  .ponent('multiCheckboxContainer', {
    controller: function () {
      var ctrl = this;
      var checkboxes = [];
      var checkboxModels = [];
      var previousClickedCheckbox = null;
      
      ctrl.addCheckbox = addCheckbox;
      ctrl.onCheckboxClick = onCheckboxClick;
      
      function addCheckbox(checkbox, checkboxModelCtrl) {
        checkboxes.push(checkbox);
        checkboxModels.push(checkboxModelCtrl);
      }
      
      function onCheckboxClick(checkbox, shiftKey) {
        var start, end, i, checking;
        if (shiftKey && previousClickedCheckbox) {
          checking = checkbox.prop('checked')
          start = checkboxes.indexOf(previousClickedCheckbox);
          end = checkboxes.indexOf(checkbox);
          if (start > end) {
            start = start + end;
            end = start - end;
            start = start - end;
          }
          for (i = start; i <= end; i++) {
            checkboxes[i].prop('checked', checking);
            checkboxModels[i].$setViewValue(checking);
          }
        }
        previousClickedCheckbox = checkbox;
      }
    }
  })
  .directive('multiCheckbox', function () {
    return {
      restrict: 'A',
      require: ['^^multiCheckboxContainer', 'ngModel'],
      link: function (scope, element, attrs, controllers) {
        var containerCtrl = controllers[0];
        var ngModelCtrl = controllers[1];
        containerCtrl.addCheckbox(element, ngModelCtrl);
        
        element.on('click', function (ev) {
          containerCtrl.onCheckboxClick(element, ev.shiftKey);
        });
      }
    };
  });

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController as vm">
  <multi-checkbox-container>
    <div ng-repeat="botiga in botigues">
      <input type="checkbox" multi-checkbox ng-model="checks[botiga]">
      <label>Botiga {{botiga}}</label>
    </div>
  </multi-checkbox-container>
  <p>checks = {{ checks }}</p>
</div>

Not a plete solution, but this should work for you.

http://jsfiddle/AvGKj/705/

just keep track of each lastChecked checkbox, and on shift+click, mark all the checkboxes as checked.

<input type="checkbox" ng-checked = 'appObj.checked'  ng-click="checked($index, $event)">

$scope.checked = function($index, $event){

        if($scope.lastChecked && $event.shiftKey){
           for(i=$scope.lastChecked; i<$index;i++){
             $scope.myAppObjects[i].checked=true;
           }
        }
        $scope.myAppObjects[$index].checked=true;
        $scope.lastChecked = $index;
        }

this code would only work if you ckeck from 0 - positive integer , but not reverse, you wuld require to do some modification to make it work pletely.

hope this helps

Below presented the solution (Special thanks to Naeem Shaikh): http://jsfiddle/dmakris/AvGKj/709/

HTML code:

<div ng-controller="MyCtrl">
 <table class='table table-bordered'>
  <tr ng-repeat="obj in myObjects">
   <td>{{obj.id}}
    <input type="checkbox" ng-checked = 'obj.checked' ng-click="checked($index, $event)">
   </td>
   <td>test {{obj.id}}</td>
 - </tr>
 </table>
</div>

Javascript (AngularJS) code:

function MyCtrl($scope) {
 $scope.myObjects = [{id: 1, checked:false}, {id: 2, checked:false},      
                     {id: 3, checked:false}, {id: 4, checked:false},
                     {id: 5, checked:false}, {id: 6, checked:false}, 
                     {id: 7, checked:false}];

  $scope.checked = function($index, $event){
  if(typeof $scope.lastChecked !='undefined' && $event.shiftKey){
   for(i=$scope.lastChecked; i<=$index; i++){
    $scope.myObjects[i].checked=true;
   }
  }
  $scope.lastChecked = $index;
  $scope.myObjects[$index].checked=true;
 }
}