AngularJS：如何使用 shift 和鼠标单击 select 多个复选框？

Question

是否可以使用 shift 和鼠标单击来 select 使用 AngularJS 的 table 上的多个元素？

我有一个 table，其中第一列是一个复选框，我想使用 SHIFT 键和鼠标单击来连续 select 多行，并且可以执行诸如删除之类的操作，编辑它们等

示例步骤：

单击第一行的复选框。
按住 SHIFT 键。
单击第 10 行的复选框。

结果：前 10 行将被 selected。

有谁知道如何使用 AngularJS 完成此操作？

Answer 1

这不是一个完整的解决方案，但这应该适合您。

http://jsfiddle.net/AvGKj/705/

只需跟踪每个 lastChecked 复选框，然后在按住 Shift 键的同时单击，将所有复选框标记为已选中。

<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;
        }

此代码仅在您从 0 - 正整数开始检查而不是反向时才有效，您需要进行一些修改才能使其完全正常工作。

希望这对您有所帮助

Answer 2

下面给出了解决方案（特别感谢 Naeem Shaikh）： http://jsfiddle.net/dmakris/AvGKj/709/

HTML代码：

<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) 代码:

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;
 }
}

Answer 3

我也有类似的需求。虽然更新复选框的正确方法确实是通过直接更新模型，但我想要一个更通用的解决方案。

所以我构建了一对指令，这样我就可以在任何复选框列表上重复使用它。基本上，您用 <multi-checkbox-container> 包装所有复选框，然后向每个复选框添加一个 multi-checkbox 属性。代码完成剩下的工作。简单易行。

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

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

  })
  .component('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.com/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>

AngularJS：如何使用 shift 和鼠标单击 select 多个复选框？

AngularJS: How can I select multiple checkboxes using shift and mouse click?

javascript

angularjs

checkbox

md-select