Как выбрать несколько файлов с помощью клавиши 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>

В моем приложении при выборе папки он открывает папку, при выборе файлов он просто выбирает файл для будущего использования.В образце созданного плунжера у меня есть 2 папки и 3 файла.Здесь я могу выбрать только один файл.Как я могу выбрать несколько файлов, нажав Ctrl (аналогично выбору файлов Windows) и отобразить эти выбранные файлы по нажатию кнопки «Показать выбранные файлы». Вот ссылка на плункер:

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

См. Plunkr в https://plnkr.co/edit/QLwZuQa3AHdelJKFSIkL?p=preview (это также делает множественный выбор для metaKey в системах MacOS)