Using jquery next() prev() on ng-repeated list items

Question

I have a list item which I repeat over using ng-repeat. This list item is a list of key word suggestions. I want to use jquery to simply add a highlight css class when the user presses the down/up arrow but my jquery does not work probably because the suggestions were inserted by angular. How can I get jquery to pick up the keyword suggestions currently on the DOM so that my next and prev works?

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

};

I should also add that this input field is inside a modal box using angularstrap which may have something to do with the problem (not sure).

To summarise how can I get jQuery to pick up the list items created by angular?

In an ideal situation I'd prefer to just use angular but I cant exactly work out how to do it seeing as next() and prev() is needed otherwise it looks like I'll have to use some long winded for loop.

Answer 1

The more angular, less jQuery way to make this work is to use the built in bindings and properties of angularJS. Here is a concept plunk that accesses and changes the class of items in an ng-repeat by clicking a button.

This plunk makes use of:

1. ng-class which is used to conditionally set the class of an element.
2. $index which allows easy access to the index of an element within ng-repeat.

The concepts are explained pretty well here (conditional styles), and here (ng-class).

In the markup:

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

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

and in the controller:

$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;
            }
        }