Question

我有一个列表项，我重复使用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创建的列表项？

在一个理想的情况下，我更喜欢使用角度，但我无法确切地知道如何看待下一个（）和prev（）是需要的，否则看起来我将不得不使用一些长的啰嗦循环。

Answer 1

更有棱角，更少jQuery的方法是使用angularJS的内置绑定和属性。 Here is a concept plunk通过点击按钮访问和更改ng-repeat中的项目类别。

这个插件使用：

ng-class用于有条件地设置元素的类。
$index，可以轻松访问ng-repeat内的元素索引。

很好地解释了这些概念here (conditional styles)和here (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;
            }
        }

在ng-repeated列表项上使用jquery next（）prev（）

1 个答案: