分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在Angularjs的列表中使用键上/下指令？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有以下代码： @H_673_5@ @H_673_5@

app.directive('ngUp',function () {
    return function (scope,element,attrs) {
        element.bind("keyup",function (event) {
            if(event.which === 40) {
                  console.log('down')
                }
            else if (event.which === 38) {
                  console.log('up');
                }
            else {
                console.log('some other');
            }

        });
    };
});

@H_673_5@我有：

@H_673_5@

<div  class="scrollbar" id="ex3">
<div>
    <ul>
        <li ng-repeat="video in videos">
            <a href="#" ng-click="SELEct($indeX)" style="font-size: 100%">
                {{video.name | subStringFilter : 20}}
            </a>
        </li>
    </ul>
</div>

@H_673_5@如果我把ng-up放在li元素或锚元素上,我将指令中的元素作为a.ng-binding.

@H_673_5@我不知道这是什么.

@H_673_5@我想要的是能够使用我的向上和向下箭头键向上和向下滚动列表(并在滚动时将类应用于突出显示的列表元素).

@H_673_5@我期待元素可以是li元素或锚元素,但是我得到了a.ng-binding,它在向上或向下按键时不会触发.

解决方法

请注意,您需要在< li>上设置tabindex属性.使其能够触发keyup事件： @H_673_5@ @H_673_5@

<li tabindex="{{$index}}">

@H_673_5@试试这个指令：

@H_673_5@

app.directive('ngUp',function() {
  return {
    scope: {
      SELEct: "&"
    },link: function(scope,attrs) {
      element.on("keyup","[SELEctable]",function(event) {
        var $this = $(this);
        var SELEctedElement = {};

        scope.$apply(function() {
          if (event.which === 40) {
            SELEctedElement = $this.next("[SELEctable]");
            if (SELEctedElement.length > 0) {
              scope.SELEct({
                element: SELEctedElement
              });
            }
          } else if (event.which === 38) {
            SELEctedElement = $this.prev("[SELEctable]");
            if (SELEctedElement.length > 0) {
              scope.SELEct({
                element: $this.prev("[SELEctable]")
              });
            }
          } else {

          }
        });

        if (SELEctedElement.length > 0) {
          $this.blur();
          SELEctedElement.focus();
        }

      });
    }
  }
});

@H_673_5@在html中使用它：

@H_673_5@

<ul ng-up SELEct="SELEct(element)">
      <li SELEctable ng-repeat="video in videos" tabindex="{{$index}}" ng-click="SELEct($event.target)" ng-class="{SELEcted:video.SELEcteD}">
        <a href="#" style="font-size: 100%">
                {{video.name }}
            </a>
      </li>
  </ul>

@H_673_5@DEMO(点击选择一个元素,从那时你可以使用向上和向下箭头选择)

@H_673_5@说明：

@H_673_5@在我看来,这个指令应该在列表项容器元素上指定(在这种情况下是< ul>),并且任何可选项都必须应用一个可选择的属性.为了使指令可重用,该指令只负责处理keyup事件并选择元素,如何选择元素的实现细节应作为函数传递：

@H_673_5@

scope: {
    SELEct: "&"
}

@H_673_5@每当我需要选择一个元素时,我都会调用这个绑定函数：

@H_673_5@

scope.SELEct({
                    element: $this.prev("[SELEctable]")
          });

@H_673_5@在这个例子中,我假设将元素设置为选中的逻辑如下：

@H_673_5@

$scope.SELEct = function(element) {
    angular.forEach($scope.videos,function(value) {
      value.SELEcted = false;
    });

    angular.element(element).scope().video.SELEcted = true;
};