自动完成文本框和AngularJS

我有一个文本框,我想在其上应用自动完成.我使用以下插件：

它运行正常,但只要我将它与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;
    }
}

和jfiddle链接如下：

jfiddle

正如您所看到的,自动完成功能不起作用,但没有Angular它可以正常工作.

有人可以帮忙吗？

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

吸血鬼给你
http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview对不起,我不擅长小提琴.

自动完成文本框和AngularJS

猜你在找的Angularjs相关文章