2015-01-17 3 views
2

У меня есть текстовое поле, и я хочу применить автозаполнение на нем. Я использую следующий плагин:autocomplete текстовое поле и AngularJS

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

Как вы можете видеть, автозаполнение не работает, хотя без углового оно работает хорошо.

Может ли кто-нибудь помочь?

+0

проверьте это http://stackoverflow.com/questions/25268897/kendo-ui-angular-js-and-autocomplete-with-a-service – saurabh64

+0

Спасибо, но если я хорошо понял эту ссылку, они используют другой плагин но я хочу использовать этот, и я не знаю, почему angularjs не работает с моим текущим кодом (я не вижу ничего плохого)? –

ответ

12
<html lang="en"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Autocomplete - Default functionality</title> 
    <script data-require="[email protected]" 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 для вас http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview К сожалению я не очень хорошо на скрипке.

+0

Большое спасибо за ваш ответ, но можете ли вы, что не так с моим, что не работает? это потому, что я не определил приложение? –

+0

Эй, извините, есть много ошибок в вашем коде, пожалуйста, проверьте консоль jsfiddle. Угловой не загружен должным образом в скрипке. И если вы примете мой ответ, отметьте его :-P Thanku – squiroid

Смежные вопросы