javascript - 自动完成 jquery 不适用于 ngmodel 和 ngrepeat ( Angular )

Question

我试图在我的 Angular Controller 中使用 jquery 的自动完成功能，但这不起作用可能是因为我不确切知道 ng-model 或 ng-repeat ^^

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

我的 Controller 包含以下代码:

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

您可以使用纯 html 来创建自动完成功能，而不是使用 jquery 自动完成功能。

查看此post here