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.

Have you read: http://stackoverflow.com/a/15012542/45786 – TheHippo May 29 '13 at 16:13 — TheHippo, May 29 '13 at 16:13

score 3 · Accepted Answer · edited May 23 '17 at 12:33

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:

ng-class which is used to conditionally set the class of an element.
$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;
            }
        }

Thank you this worked. I'll do some more reading on the above. — Malcr001, May 29 '13 at 21:25
I think in the long run, going all-in on angular is less work and easier-to-maintain code. The drawback is you don't get many of the handy wrappers that make jQuery so simple and popular. — rGil, May 29 '13 at 23:04

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

1 Answers1