自动完成文本框和AngularJS_Angularjs_Jquery Plugins

自动完成文本框和AngularJS

angularjs jquery-plugins

自动完成文本框和AngularJS,angularjs,jquery-plugins,Angularjs,Jquery Plugins,我有一个文本框，我想应用自动完成。我正在使用以下插件：它工作得很好，但一旦我把它和AngularJS结合起来，它就停止工作了：我有以下代码： function personController($scope) { $scope.firstName = "John", $scope.lastName = "Doe", $scope.availableTags = [], $scope.fullName = function() { /* ret

我有一个文本框，我想应用自动完成。我正在使用以下插件：

它工作得很好，但一旦我把它和AngularJS结合起来，它就停止工作了：

我有以下代码：

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;
    }
}

JFIDLE链接如下所示：

正如您所看到的，自动完成不起作用，虽然没有角度，但它工作得很好

有人能帮忙吗？


<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>

jQuery UI自动完成-默认功能
var-app=angular.module（'app'，[]）；
应用程序控制器（'ctrl'，函数（$scope）{
$scope.availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$scope.complete=函数（）{
log（$scope.availableTags）；
$（“#标记”）.autocomplete({
来源：$scope.availableTags
});
} 
});
标签：

给你一把

很抱歉，我不擅长小提琴。

请检查此链接，谢谢，但如果我在该链接中理解得很好，他们使用的是不同的插件，但我想使用此插件，我不知道为什么angularjs不能与我当前的代码一起工作（我没有看到任何错误）？非常感谢您的回答，但您能告诉我，我的代码有什么问题吗？这是因为我没有定义应用程序吗？嘿，对不起，您的代码中有很多错误，请检查JSFIDLE的控制台。Angular在小提琴中没有正确加载。如果你接受我的回答，请注明：-P谢谢