如何在列表''元素中使用Ctrl键选择多个文件<li>

Question

我们正在实现自己的浏览，因为现有的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>

在我的应用程序中，选择文件夹时它会打开文件夹，在选择文件时，它只是选择文件以供将来使用。在创建的示例 plunker 中，我有 2 个文件夹和 3 个文件。在这里，我一次只能选择一个文件。如何通过按ctrl(类似于Windows文件选择(选择多个文件，并在单击"显示所选文件"按钮时显示这些选定的文件。Hre 链接到 plunker：

https://plnkr.co/edit/REBtXPSH8sa0cvYvp9A4?p=preview

如果需要任何其他信息，请告诉我。任何帮助，不胜感激。

代码在这里

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";
}; 
}]);

Answer 1

你在代码中违反了一些基本的 angularJS 原则(比如直接 DOM 操作、与全局document变量的交互(，所以我建议你先熟悉这些： https://docs.angularjs.org/tutorial

要解决您的问题，请执行以下操作：

在 HTML 中，将 clickEvent 传递到getFolderList方法中：

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

在控制器中，检查ctrlKey标志是否为 true

$scope.getFolderList = function (clickEvent, index) {
if (clickEvent.ctrlKey) {
// ctrlKey is pressed while clicking
} else {
$scope.resetBackground();  
}
document.getElementById('object-' + index).style.backgroundColor = "#00FF00";
}; 

在 https://plnkr.co/edit/QLwZuQa3AHdelJKFSIkL?p=preview 处查看 plunkr(这也对 macOS 系统上的metaKey进行多选(