自动完成jquery;t使用ngmodel和ngrepeat(angular)
auto-complete jquery doesn't work with with ngmodel and ngrepeat (angular)
我正试图在我的角度控制器中使用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
这应该能解决你的问题。
相关文章:
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- 如何将ngrepeat下的ngmodel绑定到$scope
- Angular ngRepeat:重复错误(尽管没有重复的密钥)
- 如何按对象反转Angular ngRepeat的顺序's键,这些键是数字键
- 如何使用javascript将textbox的值赋给ngModel textbox
- 通过ngModel访问html元素
- 自动完成jquery;t使用ngmodel和ngrepeat(angular)
- 使用ngRepeat中的Angular动态更改元素颜色
- http://errors.angularjs.org/1.4.1/ngRepeat/dupes
- 用“;ngModel”;只有在散焦后才能显示其价值
- 我的指令在ngRepeat和ngInclude之前执行,尽管默认优先级为0
- AngularJS-将数组值绑定到输入ngModel
- Angular:如何使用ngRepeat并设置默认单选按钮选项
- Angular.js指令格式化程序只调用过一次,或者如何告诉ngModel表现得像watchCollection
- ngRepeat中的动态ngModel对象属性
- ngModel和ngRepeat以及对属性的访问
- 在 ngRepeat 中为动态 ngModel 设置值
- 在ngRepeat上,创建可编辑的表格,如何将数据保存到ngModel
- Angular的ngRepeat会用$index动态创建ngModel
- 带有ngRepeat的单选按钮上的Broken ngModel