auto-complete jquery funktioniert nicht mit ngmodel und ngrepeat (eckig)

Question

Ich versuche, Autocomplete-Funktion von jquery in meinem eckigen Controller zu verwenden, und das funktioniert nicht, kann wegen ng-Modell oder ng-repeat I sein nicht genau wissen ^^

Meine hTML-Datei enthält den 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> 

Und mein Controller enthält den folgenden 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); 
    }); 
}; 

Vielen Dank für Ihre Hilfe im Voraus :)

Answer 1

Anstatt jQuery-Autocomplete zu verwenden, können Sie einfach HTML verwenden, um Ihre Autovervollständigung zu erstellen.

Sehen Sie diese post here

Answer 2

ich das gleiche Problem haben. Der Grund ist angularjs repeat ng-model tag die ID ist immer die gleiche.

Also nur das erste Tag mit dieser ID funktioniert gut mit Autocomplete. aber die zweite und nach mit der gleichen ID würde nicht funktionieren.

Ich betrachte Winkel-Modul angucomplete-alt angucomplete-alt

Dies Ihr Problem lösen soll.