Question

我有以下情况：

<input type="text" ng-model="search" />
<div ng-hide="!search.length || selected ">
   <ul>
      <li ng-repeat="poster in tasks| poster: search track by $index" ng-click="handleSelection(poster)" style="cursor:pointer" ng-class="{active:isCurrent($index)}" ng-mouseenter="setCurrent($index)">
         {{poster}}
      </li>
   </ul>
</div>

一切正常，带有“建议”项目的列表应该出现，但是当用户到达某个点并按下箭头以便能够跳转到建议列表然后按回车键填充搜索框并关闭建议列表。

我试图创建一个绑定到keydown并听取密钥代码的指令，让我们说40（向下箭头），但是即使我将tabindex添加到LI元素，我也无法将注意力集中在它们上面。更进一步，我假设我需要知道LI的长度，所以当用户到达最后一个元素时它就会停止。上升的逻辑相同。

提前感谢！

编辑：我明白了，我没有看到整个时间没有勺子。这个怎么样？

<input type="text" ng-model="search" ng-keydown="selected=false" ng-keypress="keyChanged($event);" />
<div ng-hide="!search.length || selected ">
<ul>
<li ng-repeat="poster in  (filteredResults = (tasks | poster: search)) track by $index" ng-click="handleSelection(poster)" style="cursor:pointer" ng-class="  {active:isCurrent($index+1)}" ng-mouseenter="setCurrent($index+1)">
{{poster}}
</li>
</ul>
</div>

设置全局

current = 1;

并在控制器中像这样：

$scope.handleSelection = function( item ) {

        $scope.search = item;

        $scope.selected = true;

    }


$scope.isCurrent = function( index ) {
       if( index === current  ) {
          return true;
       }
       else {
         return false;
       }

    }


 $scope.setCurrent = function( index ) {

         current = index;
    }


 $scope.keyChanged = function( ev ) {

      //going down
        if( ev.keyCode == 40 && (current+1) <= $scope.filteredResults.length ) {

          $scope.setCurrent( current + 1 );
        }

        //going up
        if( ev.keyCode == 38 && (current-1) >= 1 ) {
          $scope.setCurrent( current - 1 );
        }

        //press enter
        if( ev.keyCode == 13 ) {
            $scope.handleSelection( $scope.filteredResults[current-1]);
        }
    }

适用于键盘和鼠标，并将停止和第一个/最后一个元素。我省略了过滤器，因为它们与当前情况无关。

Answer 1

解决方案1：使用typeahead：http://angular-ui.github.io/bootstrap/

解决方案2，如果你真的需要自定义：

我想知道是否有快捷方式，但同时这是我的代码的样子，这些是代码片段，应该将它们作为伪代码并根据您自己的项目进行调整：

在服务中：

  searchBoxData.onKeyUpAndDown = function(direction){
    searchBoxData.selected_index += direction;
    if(searchBoxData.selected_index < 0){
      searchBoxData.selected_index = searchBoxData.displayedLength() - 1;
    }else if(searchBoxData.selected_index > searchBoxData.displayedLength() - 1){
      searchBoxData.selected_index = 0;
    }
    searchBoxData.selectContent();
  };

在指令

中

app.directive('fancyinput', [ "$rootScope", "SearchBoxData", function($rootScope, SearchBoxData) {

  return {
    restrict: "A",
    link: function link(scope, element) {


      scope.unbind_up_and_down = false;
      scope.searchBoxData = SearchBoxData;


      element.bind("keydown", function(e){
        if(e.keyCode === 13){
          scope.searchBoxData.submitQuery(e);
        }else{
          if ((e.keyCode === 38 || e.keyCode === 40) && scope.unbind_up_and_down === false) {
            var direction = +1;
            if (e.keyCode === 38){ direction = -1; }
            $scope.searchBoxData.onKeyUpAndDown(direction);
          }else{
            // reset selection if typing
            scope.$apply(function () { scope.searchBoxData.selected_index = 10000; });
            scope.processBinding(e, this);
          }
        }
      });

     }

  };
}]);

如果您还有其他需要，请告诉我。我会相应地更新我的答案。

AngularJS聚焦元素

1 个答案: