自动完成 jquery 不适用于 ngmodel 和 ngrepeat (angular)答案

【问题标题】：auto-complete jquery doesn't work with with ngmodel and ngrepeat (angular)自动完成 jquery 不适用于 ngmodel 和 ngrepeat (angular)
【发布时间】：2017-07-29 06:24:27
【问题描述】：

我正在尝试在我的角度控制器中使用 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>

我的控制器包含以下代码：

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

提前感谢您的帮助:)

【问题讨论】：

标签： javascript jquery angularjs autocomplete

【解决方案1】：

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

看到这个post here

【讨论】：

这是非常简单的自动完成！我正在查看我的代码有什么问题^^
最适合我的需要

【解决方案2】：

我也有同样的问题。原因是 angularjs 重复 ng-model 标签的 id 总是相同的。

因此，只有具有该 ID 的第一个标签才能正常使用自动完成功能。但具有相同 ID 的第二个及之后将不起作用。

我在看 angular-module angucomplete-alt angucomplete-alt

这应该可以解决您的问题。

【讨论】：