自动完成文本框和 AngularJS [英] autocomplete textbox and AngularJS
本文介绍了自动完成文本框和 AngularJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个文本框，我想对其应用自动完成功能.我正在使用以下插件:
它工作正常，但一旦我将它与 AngularJS 结合起来，它就会停止工作:
我有以下代码:
function personController($scope) {$scope.firstName = "约翰",$scope.lastName = "Doe",$scope.availableTags = [],$scope.fullName = function() {/* 返回 $scope.firstName + " " + $scope.lastName;*/$scope.availableTags= ["动作脚本","AppleScript","阿普",基本的"，C"，"C++","Clojure","COBOL","冷聚变","二郎","Fortran",格调"，"哈斯克尔","爪哇","JavaScript","Lisp","珀尔","PHP",Python"，红宝石"，"斯卡拉",方案"];$(document).ajaxComplete(function(){警报('');$("#txt").自动完成({来源:$scope.availableTags，});});//返回 $scope.availableTags;}}和jfiddle链接如下:
如您所见，自动完成功能不起作用，但没有 Angular 时它运行良好.
有人可以帮忙吗?
解决方案
<头><meta charset="utf-8"/><title>jQuery UI 自动完成 - 默认功能</title><script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></脚本><link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/><script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script><脚本>var app=angular.module('app',[]);app.controller('ctrl',function($scope){$scope.availableTags = ["动作脚本","AppleScript","阿普",基本的"，C"，"C++","Clojure","COBOL","冷聚变","二郎","Fortran",格调"，"哈斯克尔","爪哇","JavaScript","Lisp","珀尔","PHP",Python"，红宝石"，"斯卡拉",方案"];$scope.complete=function(){控制台日志($scope.availableTags)；$( "#tags" ).autocomplete({来源:$scope.availableTags});}});<body ng-app="app" ng-controller="ctrl"><div class="ui-widget"><label for="tags">标签:</label><input id="tags" ng-keyup="complete()"/></html>
Plunker 为您服务http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview对不起，我不擅长小提琴.
I have a text box and I want to apply the autocomplete on it. I am using the following plugin:
and it works fine but as soon as I combine it with AngularJS it stops working:
I have the following code:
function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.availableTags = [],
$scope.fullName = function() {
/* return $scope.firstName + " " + $scope.lastName;*/
$scope.availableTags= [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(document).ajaxComplete(function(){
alert('');
$("#txt").autocomplete({
source: $scope.availableTags,
});
});
//return $scope.availableTags;
}
}
and jfiddle link is as follow:
As you can see the autocomplete does not work, though without Angular it works well.
Can anyone help?
解决方案
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
var app=angular.module('app',[]);
app.controller('ctrl',function($scope){
$scope.availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$scope.complete=function(){
console.log($scope.availableTags);
$( "#tags" ).autocomplete({
source: $scope.availableTags
});
}
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" ng-keyup="complete()"/>
</div>
</body>
</html>
Plunker for you http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview Sorry I am not good at fiddle.
这篇关于自动完成文本框和 AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
