自动完成jquery;t使用ngmodel和ngrepeat(angular)

auto-complete jquery doesn't work with with ngmodel and ngrepeat (angular)

本文关键字:ngmodel ngrepeat angular 使用 jquery      更新时间:2023-09-26

我正试图在我的角度控制器中使用jquery的自动完成功能,但这可能是因为ng模型或ng重复,我不知道确切的^^

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

感谢您提前提供的帮助:)

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

点击这里查看这篇文章

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

因此,只有具有该id的第一个标记才能正常工作。但是具有相同id的第二个和第二个之后将不起作用。

我正在看角度模块angucomplete alt angucomplex alt

这应该能解决你的问题。