如何在Angularjs的列表中使用键上/下指令？

发布时间：2020-12-17 07:08:01 所属栏目：安全来源：网络整理

导读：我有以下代码： 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 { con

我有以下代码：

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');
            }

        });
    };
});

我有：

<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>

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

我不知道这是什么.

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

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

解决方法

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

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

试试这个指令：

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();
        }

      });
    }
  }
});

在html中使用它：

<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>

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

说明：

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

scope: {
    select: "&"
}

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

scope.select({
                    element: $this.prev("[selectable]")
          });

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!