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文件选择）并单击“显示所选文件”按钮显示所选文件。这是链接到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标志是否为真

$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进行多选）

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

1 个答案: