自动完成 jquery 不适用于 ngmodel 和 ngrepeat（角度）

Question

I am trying to use autocomplete function of jquery inside my angular controller and that doesn't work may be because of ng-model or ng-repeat I don't know exactly ^^

My html file contains this code

<div ng-if="data._id" data-ng-controller="AddonExclusivityCtrl" ng-init="init()">
<hr>
<label>Add an addon that is not bookable with this one:</label>
<input id="addon-search" type="text" 
ng-model="addon_filter_name" 
class="form-control" placeholder="Search for an addon...">
<br>
<div ng-show="data._embedded.exclusive_with && data._embedded.exclusive_with.length > 0">
<label>Not bookable with:</label>
<ul>
<li ng-repeat="exclusive_with in data._embedded.exclusive_with">
{{exclusive_with.description}} <a href="#" 
ng-click="removeExclusivity($event, exclusive_with)" 
title="Remove mutual exclusivity">
<span class="glyphicon glyphicon-trash"></span></a>
</li>
</ul>
</div>
</div>

And my controller contains the following code :

var lastFetchedAddonList = [];

$scope.init = function() {
    $('#addon-search').autocomplete({
        source: function( request, response ) {
            Addon.query({ name: request.term, global: null }, function(results) {
                lastFetchedAddonList = results.data;

                var suggestions = [];
                angular.forEach(results.data, function(v, i){
                   suggestions.push({ label: v.description, value: i });
                });
                response(suggestions);
            });
        },
        select: function( event, ui ) {
            event.preventDefault();
            if ($scope.data._embedded === undefined) {
                $scope.data._embedded = [];
            }

            if ($scope.data._embedded.exclusive_with === undefined) {
                $scope.data._embedded.exclusive_with = [];
            }

            var addon = lastFetchedAddonList[ui.item.value];

            var exclusiveAddon = new AddonExclusivity();
            exclusiveAddon._id = $scope.data._id;
            exclusiveAddon.exclusive_with_addon = addon.name;

            AddonExclusivity.save(exclusiveAddon, function(){
                $rootScope.addNotification('Added ' + addon.description + ' as mutually exclusive with ' + $scope.data.description);
                $scope.data._embedded.exclusive_with.push(addon);
                $('#addon-search').val('');
            });

            return false;
        }
    });
};

$scope.removeExclusivity = function($event, addon) {
    $event.preventDefault();
    AddonExclusivity.delete({ id: $scope.data._id, other_id: addon.name }, function(){
        $rootScope.addNotification('Addon ' + addon.description + ' is not anymore mutually exclusive with ' + $scope.data.description);
        $scope.data._embedded.exclusive_with.splice($scope.data._embedded.exclusive_with.indexOf(addon), 1);
    });
};

Thank you for your help in advance :)

Answer 1

Instead of using jquery autocomplete, you can use plain html to create your autocomplete.

See this post here

Answer 2

I have the same problem. The reason is angularjs repeat ng-model tag the id is always the same.

So only the first tag with that id works fine with autocomplete. but the second and after with same id would not work.

I am looking at angular-module angucomplete-alt angucomplete-alt

This should solve your problem.