0

在试图解决这个问题一段时间后，我似乎陷入了死胡同，想到它在 jQuery 中是多么容易让我再次想到 angular，但也许我认为这是一种错误的方式。

拥有这个 DOM：

<div ng-controller="ChildCategoriesController">
        <div style="float:right; width:362px; height:57px; background-color:white; border:1px solid black; position:relative; right:272px;">
            <input type="text" style="width:362px; height:57px; line-height:57px; font-family:Arial; font-size:24px;" ui-keyup="{'40':'keypressCallback11($event)'}" ng-model="jobChildCategoryModel.JobCategoryName" ng-change="change()" placeholder="Place Holder Example" />
            <div id="JobscCategories" style="width:362px; background-color:white; border:1px solid black; position:relative; right:1px; display:none; font-family:Arial; font-size:24px;">
                <div click enter leave ng-class="{'MouseOver':$first}" ng-repeat="cCategory in cCategories | filter:jobChildCategoryModel | orderBy:'JobCategoryName' | limitTo:7 | unique:'JobCategoryName'" ui-keyup="{'enter':'keypressCallback1($event)'}" id="cCategoryID_{{cCategory.JobCategoryID}}">{{cCategory.JobCategoryName}}</div>
            </div>
        </div>
        <div style="float:right; position:relative; right:352px; top:22px; font-size:20px; font-weight:bold; font-family:Arial;"><a href="#">Show Jobs</a></div>
    </div>

当使用带有指令的鼠标时，我可以找到我在 DOM 中的位置，并且一切都在那里工作，但无法弄清楚如何使用键箭头来做到这一点。我无法将 ui-keyup 绑定到 div 元素（不会触发事件），并且无法弄清楚如何使用箭头从输入移动到自动完成 div。更奇怪的是，我找不到一个完整而好的例子来做到这一点。

需要明确的是，DOM 是：

div --> 输入 div ---> 多个 div 类别的 div 元素

我需要启用某人，在输入中输入几个字母后，能够使用箭头移动到类别 div 并使用 enter 键选择其中一个或返回顶部。而且，如果有人使用鼠标移动并且位于特定元素上以便能够从该点使用键......我什至似乎无法找到如何从类别 div 块中获取特定元素，如当我在控制器中时，我不知道元素的索引是什么。

任何人都可以回答这个问题或发给我一个很好的教程吗像这样的东西。

谢谢

4

1 回答 1

4 
directive('autoComplete',function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(element, function () {
                    $(element).autocomplete(scope.$eval(attrs.autoComplete));
                })
            }
        };
    }).

 <input type="text" auto-complete="optionsForAutoComplete"/>

并在控制器中定义所有 optionsForAutoComplete （这实际上是您在 jquery 中使用的常用自动完成选项）。例如：-

$scope.optionsForAutoComplete =   {
    minLength: 1,
    open: function () {
    },
    source: function (req, res) {
      res([{label: 'test', value: 'test', id: 101}, {label: 'test1', value: 'test1', id: 102}]);
    },
    select: function (event, ui) {
    }
};
于 2013-10-24T14:33:54.723 回答