Javascript 如何使用列表中的Ctrl键选择多个文件`<；李>；`要素

我们正在实现自己的浏览，因为现有的HTML浏览存在某些限制。在HTML浏览中，我们可以通过按Ctrl键选择多个文件，我们希望在自定义浏览中实现类似的功能

  <div style="width: 387px; height: 300px; padding-top:5px;margin-right:10px; border: 1px solid white; ">
      <ul>
          <li ng-repeat="folders in folderList">
              <button ng-attr-id="{{ 'object-' + $index}}"
                      style="cursor:pointer;border: 0px solid white; border-radius: 0px; padding-left: 30px;height:auto;margin-bottom: 5px;"
                      class="button btn-bgc bgc-hover"
                      data-ng-click="getFolderList($index)">
                  {{folders.name}}
               <i class="fa fa-hdd-o"
                  ng-if="folders.type === 'Device'"
                  style="display: inline; float:left; padding: 2px; color: #D3D3D3;margin-left: -30px;"
                  aria-hidden="true"></i>
               <i class="fa fa-folder-open"
                  ng-if="folders.type === 'folder'"
                  style="display: inline; float:left; padding: 2px; color: #FFE4B5;margin-left: -30px;"
                  aria-hidden="true"></i>
               <i class="fa fa-file-o"
                  ng-if="folders.type === 'file'"
                  style="display: inline; float:left; padding: 2px; margin-left: -30px;" aria-hidden="true"></i>
             </button>
          </li>
      </ul>
    </div>

{{folders.name}

在我的应用程序中，在选择文件夹时打开文件夹，在选择文件时只选择文件供将来使用。在创建的plunker示例中，我有2个文件夹和3个文件。此时，我只能选择一个文件。如何通过按ctrl键（类似于windows文件选择）选择多个文件，并在单击“显示选定文件”按钮时显示这些选定文件。Hre是指向plunker的链接：

如果需要其他信息，请告诉我。感谢您的帮助

//代码在这里

var testController = angular.module('test', []);

testController.controller('testController', ['$scope', '$document', function($scope, $document) {


  $scope.folderList = [{name:"folder1",type:"folder"},{name:"folder2",type:"folder"},{name:"file1.txt",type:"file"},{name:"file2.txt",type:"file"},{name:"file3.txt",type:"file"}];

  $scope.resetBackground = function () {

            for (var i = 0; i < $scope.folderList.length; i++) {
                document.getElementById('object-' + i).style.backgroundColor = "white";
            }
        }

  $scope.getFolderList = function (index) {
    $scope.resetBackground();
    $document.on('keypress', function (event) {
              if(event.keyCode == 17) { // 17 - Ctrl
                  // need to select multiple files here.
              }

      })
    document.getElementById('object-' + index).style.backgroundColor = "#00FF00";
  }; 

}]);

var testController=angular.module（'test'，[]）；
controller（'testController'，['$scope'，'$document'，函数（$scope，$document）{
$scope.folderList=[{name:“folder1”，type:“folder”}，{name:“folder2”，type:“folder”}，{name:“file1.txt”，type:“file”}，{name:“file2.txt”，type:“file”}，{name:“file3.txt”，type:“file”}]；
$scope.resetBackground=函数（）{
对于（变量i=0；i<$scope.folderList.length；i++）{
document.getElementById（'object-'+i）.style.backgroundColor=“白色”；
}
}
$scope.getFolderList=函数（索引）{
$scope.resetBackground（）；
$document.on（'keypress'，函数（事件）{
如果（event.keyCode==17）{//17-Ctrl
//需要在此处选择多个文件。
}
})
document.getElementById（'object-'+index）.style.backgroundColor=“#00FF00”；
}; 
}]);

您在代码中违反了一些基本的angularJS原则（如直接DOM操作、与全局

文档

变量的交互），因此我建议您首先熟悉以下几点：

要解决您的问题：

在HTML中，将clickEvent传递到

getFolderList

方法中：

data-ng-click="getFolderList($event, $index)"

在控制器中，检查

ctrlKey

标志是否为真

$scope.getFolderList = function (clickEvent, index) {
  if (clickEvent.ctrlKey) {
    // ctrlKey is pressed while clicking
  } else {
    $scope.resetBackground();  
  }

  document.getElementById('object-' + index).style.backgroundColor = "#00FF00";
}; 

---

请参阅位于的plunkr（这也会对macOS系统上的

元键进行多选）
谢谢！！我是Angular JS新手，肯定需要查看文档，但我也不知道clickEvent.ctrlKey。使用
ng click
，事件对象可用作
$Event
。有关详细信息，请参阅