angularjs - 自动完成文本框和 AngularJS

标签 angularjs jquery-plugins

我有一个文本框,我想在它上面应用自动完成功能。我正在使用以下插件:

autocomp

它工作正常,但一旦我将它与 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",
      "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>

普朗克为你
http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview
对不起,我不擅长 fiddle 。

关于angularjs - 自动完成文本框和 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27996672/

相关文章:

javascript - AngularJS:如何在 UI-Router 中将一种状态设置为全局父级(使用模式作为公共(public)部分)

javascript - AngularJS ng-show 与 map 一起使用时不会触发

JavaScript:删除共享相同属性值的对象的重复项

jquery - Colorbox 使灯箱在滚动时固定

Angular 7 cli 应用程序中的 JQuery datepicker 不起作用

javascript - jQuery 插件 - 如何添加/绑定(bind)事件

javascript - 数据绑定(bind) AngularJS 时如何打印 <p> 标签内的超链接

javascript - 检查删除和更新 ui angular ngResource 模块

jquery - 在 jQuery 中切换 switchClass 的正确方法是什么?

jquery - 需要修改 JQuery Cycle updateActivePagerLink 选项