Question

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

提前感谢您的帮助：）

Answer 1

您可以使用纯HTML来创建自动填充，而不是使用jquery自动填充功能。

请参阅此post here

Answer 2

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

因此，只有具有该ID的第一个标记才能正常使用自动完成功能。但第二个和之后相同的ID将无法正常工作。

我正在寻找angular-module angucomplete-alt angucomplete-alt

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

自动完成jquery不能与ngmodel和ngrepeat（angular）一起使用

2 个答案: