У меня есть список элементов (каждый элемент - одна строка текста). Когда вы нажимаете на него, он меняет цвет. После того, как вы нажмете на какой-либо элемент, если вы нажмете "shift + arrow up" выше, элементы также будут выбраны. Как его реализовать? Я думал, что это может пойти так: сосредоточить внимание на конкретном элементе в функции ng-click, а затем в функции ng-keydown реализовать выбор других элементов. Но, похоже, это не работает.
<div ng-repeat="elem in listCtrl.availableElements" class="list-elem" ng-class="{ 'selected' : listCtrl.availableElements[$index].selected }" ng-click="listCtrl.listHandler($event, listCtrl.availableElements[$index])" ng-keydown="$event.shiftKey && ($event.which == 38 || $event.which == 40) && listCtrl.listHandler($event, listCtrl.availableElements[$index])">
<div>
{{elem.text}}
</div>
</div>
Сначала это рабочий плункер
Вот HTML
<div tabindex="{{$index}}" ng-keydown="moveCursor($event)" ng-repeat="elem in elements" ng-click="setCursor($index)">
<span ng-class="{ 'selected' : elements[$index].selected }">{{$index}} : {{elem.text}}</span>
</div>
tabindex
необходимо добавить, чтобы сосредоточиться на элементе.
На ng-click
я просто устанавливаю курсор.
$scope.setCursor = function(index){
var wasSelected = $scope.elements[index].selected;
$scope.unselectAll();
$scope.elements[index].selected = !wasSelected;
$scope.cursor = index;
$scope.initialCursor = index;
}
Этот курсор будет моим стержнем для выбора других элементов. Мне нужно сохранить initialCursor
чтобы знать, как вести себя при выборе вниз или вверх.
На ng-keydown
я просто обрабатываю событие самостоятельно и устанавливаю некоторые блокировки.
$scope.moveCursor = function(event){
if(event.shiftKey && event.which == 38){
if($scope.cursor > 0){
$scope.selectUp();
}
}else if(event.shiftKey && event.which == 40){
if($scope.cursor < $scope.elements.length-1){
$scope.selectDown();
}
}
}
selectUp()
и selectDown()
довольно похожи:
$scope.selectDown = function(){
//If the current cursor is ahead of the first click
if($scope.cursor < $scope.initialCursor){
$scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
$scope.cursor += 1;
}else{
$scope.cursor += 1;
$scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
}
}
$scope.selectUp = function(){
//If the current cursor is behind the first click
if($scope.cursor > $scope.initialCursor){
$scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
$scope.cursor -= 1;
}else{
$scope.cursor -= 1;
$scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
}
}
Давайте посмотрим на функцию selectUp
.
У меня есть два поведения для реализации.
Если я опережаю первоначальный клик и я selectUp
мне нужно выбрать следующий элемент вверх.
Если я за начальным кликом и я selectUp
мне нужно отменить выбор последнего выбранного элемента.
Надеюсь, это помогло.
Если вам не нравится моя реализация, вы можете просто использовать подсказку "tabindex", чтобы создать свой собственный.