auto-complete jquery не работает с ngmodel и ngrepeat (угловой)

Question

Я пытаюсь использовать функцию автозаполнения jquery внутри моего углового контроллера, и это не работает, возможно, из-за ng-модели или ng-repeat I не знаю точно ^^

Мой HTML-файл содержит этот код

<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> 

И мой контроллер содержит следующий код:

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

Спасибо за помощь заранее :)

Answer 1

Вместо использования автозаполнения jquery вы можете использовать простой html для создания своего автозаполнения.

Смотреть это post here

Answer 2

У меня такая же проблема. Причиной этого является то, что идентификатор повторяется, так как идентификатор всегда один и тот же.

Таким образом, только первый тег с этим идентификатором отлично работает с автозаполнением. , но второй и после того же идентификатора не будет работать.

Я смотрю на угловой модуль angucomplete-альт angucomplete-alt

Это должно решить вашу проблему.