我在页面上使用AjgularJS,并想添加一个字段以使用来自jqueryui的自动完成功能,并且自动完成功能不会触发ajax调用。
我已经在没有angular的页面上测试了脚本(ng-app和ng-
controller),并且效果很好,但是当我将脚本放在带有angularjs的页面上时,它停止工作。
任何想法?
jQuery脚本:
$(function () {
$('#txtProduct').autocomplete({
source: function (request, response) {
alert(request.term);
},
minLength: 3,
select: function (event, ui) {
}
});
});
结论: jQueryUI的自动完成小部件必须从AngularJS的自定义指令内部进行初始化,例如:
标记
<div ng-app="TestApp">
<h2>index</h2>
<div ng-controller="TestCtrl">
<input type="text" auto-complete>ddd</input>
</div>
</div>
角度脚本
<script type="text/javascript">
var app = angular.module('TestApp', []);
function TestCtrl($scope) { }
app.directive('autoComplete', function () {
return function postLink(scope, iElement, iAttrs) {
$(function () {
$(iElement).autocomplete({
source: function (req, resp) {
alert(req.term);
}
});
});
}
});
</script>
也许您只需要以一种“有角度的方式”进行操作即可……也就是说,使用指令来设置DOM元素并进行事件绑定,使用服务来获取数据,并使用控制器来进行业务逻辑…同时充分利用了Angular的依赖项注入优势…
一项用于获取您的自动填充数据的服务…
app.factory('autoCompleteDataService', [function() {
return {
getSource: function() {
//this is where you'd set up your source... could be an external source, I suppose. 'something.php'
return ['apples', 'oranges', 'bananas'];
}
}
}]);
执行设置自动完成插件工作的指令。
app.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
// elem is a jquery lite object if jquery is not present,
// but with jquery and jquery ui, it will be a full jquery object.
elem.autocomplete({
source: autoCompleteDataService.getSource(), //from your service
minLength: 2
});
}
};
});
并在标记中使用它…请注意ng模型使用您选择的内容在$ scope上设置一个值。
<div ng-controller="Ctrl1">
<input type="text" ng-model="foo" auto-complete/>
Foo = {{foo}}
</div>
这只是基础知识,但希望能有所帮助。
问题内容: 任何人都可以给我完整的步骤来使用jquery-ui自动完成功能。我正在使用grails 2.0.1。 我需要一个完整的示例,包括控制器和视图的代码。 提前致谢。 问题答案: 首先,您需要将main.gsp(在头部)添加到行中 插件将自动下载。 对于完整的示例,您可以使用此链接 http://jay-chandran.blogspot.com/2011/09/using-grails-w
问题内容: 我正在尝试编写一个自动完成指令,该指令使用$ http请求 (不使用任何外部插件或脚本) 从服务器获取数据。当前,它仅适用于静态数据。现在,我知道我需要将我的$ http请求插入指令的中,但是我找不到关于该主题的任何好的文档。 http请求 指示 视图 那么,如何将这些正确地按Angular方式拼凑在一起? 问题答案: 我做了一个自动完成指令,并将其上传到GitHub。它还应该能够处理
问题内容: 我有一个简单的登录表单,除非您使用Chrome的自动完成功能,否则该表单仅适用于桃花心木。 如果您开始键入并使用自动完成功能,并且该功能会自动填充您的密码,则我的angularjs模型的密码没有任何值。 我试图通过在表单上设置属性来关闭自动填充功能,但这似乎没有任何效果。 我该怎么做:1.如果有人使用Chrome的自动完成功能,请确保我能获得价值?2.禁用Chrome的自动完成功能?
问题内容: 无法使jQuery自动完成小部件与Flask框架一起使用。(http://jqueryui.com/autocomplete/#remote这里是一个示例) 在manage.py中,我得到了以下内容: 我的index.html文件: 似乎firefox中的开发工具不会返回任何错误。终端返回以下内容: 小部件不起作用。由于我对jQuery知之甚少,所以我不知道是什么原因导致了问题。有人可
问题内容: 嗨,有人可以看一看,让我知道我要去哪里了。我正在尝试使jQuery UI自动完成工作。这是我的代码:这是search.php 这是我的JavaScript内联脚本 这是“汽车”股利 当我使用Firebug查看呼叫时,我看到search.php返回了 jQuery只是显示未定义的任何想法? 问题答案: 看看jquery ui自动完成文档 。您返回的JSON与自动完成功能所寻找的不匹配。您
无法使jQuery自动完成小部件与Flask框架一起工作。(http://jqueryui.com/autocomplete/#remote下面是一个示例) 在管理中。py我得到了以下信息: 这是我的索引。html文件: 看起来 firefox 中的开发工具不会返回任何错误。终端返回以下内容: "GET /autocompleteHTTP/1.1"200- "GET/HTTP/1.1"200- "