0

我有一个使用 ng-repeat 重复的列表项。此列表项是关键字建议的列表。当用户按下向下/向上箭头时，我想使用 jquery 来简单地添加一个突出显示的 css 类，但我的 jquery 不起作用可能是因为建议是通过 angular 插入的。如何让 jquery 获取当前在 DOM 上的关键字建议，以便我的下一个和上一个工作？

HTML： 

        <input type="text" placeholder="Destination" id="destination" data-ng-model="user_keyword" ui-event="{keyup: 'change($event, user_keyword)'}">       

        <ul>
          <li data-ng-repeat="suggestion in suggestions">
           <a href="#" class="{{suggestion.highlight}}" data-ng-bind-html-unsafe="suggestion.place"></a>
          </li>
       </ul>

JavaScipt：

//Change is triggered every time a key is entered into input field
$scope.change = function(e, term){

var result_id = 'destination';
var input = $('#'+'destination');
var result_container = $(result_id);
var list_items = result_id+' li';
var selected_class = 'highlight';
var code = e.keyCode || e.which; 

   var $prev, $next, $current = $(list_items+'.'+selected_class);
   var currentSelectedhtml;

//key down press
if (code === 40) {

    $(list_items+":first").addClass(selected_class);

    currentSelectedhtml = $(list_items+":first");

//key down or key right pressed
} else if (code === 39 || code === 40) {
    $next = $current.next("li");
    if ($next.length) {
        $current.removeClass(selected_class);
        $next.addClass(selected_class);

        currentSelectedhtml = $next.html();
    }

//key up or key left press
} else if (code === 37 || code === 38) {
    $prev = $current.prev("li");
    if ($prev.length) {
        $current.removeClass(selected_class);
        $prev.addClass(selected_class);

        currentSelectedhtml = $prev.html();
    }
}

};

我还应该补充一点，这个输入字段位于使用 angularstrap 的模态框内，这可能与问题有关（不确定）。

总结一下如何让 jQuery 拾取由 angular 创建的列表项？

在理想的情况下，我宁愿只使用 angular，但我不能完全弄清楚如何做到这一点，因为需要 next() 和 prev() 否则看起来我将不得不使用一些冗长的 for 循环。

4

1 回答 1

3

使这项工作更具角度、更少 jQuery 的方法是使用 angularJS 的内置绑定和属性。 这是一个通过单击按钮 访问和更改项目类别的概念 plunk 。ng-repeat

这个 plunk 使用：

  1. ng-class用于有条件地设置元素的类。
  2. $index这允许轻松访问ng-repeat.

这些概念在这里（条件样式）和这里（ng-class）都得到了很好的解释。

在标记中：

<div ng-repeat="item in myItems" ng-class="{'selected': $index == selectedIndex}">
  <div >{{item}}</div>
</div>

<button ng-click="change()">Change</button>

在控制器中：

$scope.selectedIndex = 0;
    $scope.change = function(){
        console.log($scope.selected);
        var last_item = $scope.myItems.length - 1;
        if ($scope.selectedIndex == last_item){
            $scope.selectedIndex = 0;
        } else {
            $scope.selectedIndex += 1;
            }
        }
于 2013-05-29T20:55:12.333 回答