Как получить автозаполнение в угловых js?

У меня есть объект, который содержит имя и id.I просто хотят сделать автозаполнение, основанное на именемеМ попробовали код, как показано нижеКак получить автозаполнение в угловых js?

//Js file 
var app=angular.module("myapp",[]); 
app.controller("controller",['$scope',function($scope){ 
    $scope.persons=[ 
        { 
      Name:"Bhavani", 
      Id:67 
    }, 
    { 
     Name:"Mamata", 
     Id:66 
    }, 
    { 
     Name:"Prasanna", 
     Id:65 
    }, 
    { 
     Name:"Ramya", 
     Id:64 
    }, 
    { 
     Name:"Navya", 
     Id:63 
    } 
    ]; 
    $scope.complete=function(){ 
     $("#autocomp").autocomplete({ 
      source: $scope.persons.Id 
     }); 
    }; 
}]);

// Html файл

<!DOCTYPE html> 
<html ng-app="myapp"> 
<head> 
<meta charset="UTF-8"> 
<title>Auto Complete based on name</title> 
<script src="angularfiles/angular.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
<script src="Jsfiles/autocomp.js"></script> 
</head> 
<body ng-controller="controller"> 
    <div ng-repeat="p in persons">{{p.Name}} 
    </div> 
    <div class="ui-widget"> 
    <input type="text" id="autocomp" ng-keyup="complete()"> 
    </div> 
</body> 
</html>

выше код может иметь некоторые ошибки. Он не получает вывод, который я хочу иметь. Может ли кто-нибудь помочь мне решить эту проблему.

источник

2015-09-15 Vindya Veer

Это то, что вы пытаетесь использовать? https://jqueryui.com/autocomplete/ – SuperVeetz

Попробуйте использовать директиву ** angular-ui-bootstrap typeahead **, так как вы используете angularjs. Вот ссылка: https://angular-ui.github.io/bootstrap/#/typeahead. –

Да, но у меня есть поля в имени объекта и id..Так я пытаюсь сделать автозаполнение либо по имени, либо по id @SuperVeetz –

Попробуйте, как это, HTML:

<div ng-app = "myapp"> 
    <div ng-controller="controller"> 
     <div class="ui-widget"> 
     <input type="text" id="autocomp" auto-complete> 
     </div> 
    </div> 
    </div>

Js:

var app = angular.module("myapp",[]); 
app.controller("controller",function($scope){ 
    $scope.availableTags = [ 
    { 
      Name:"Bhavani", 
      Id:67 
    }, 
    { 
     Name:"Mamata", 
     Id:66 
    }, 
    { 
     Name:"Prasanna", 
     Id:65 
    }, 
    { 
     Name:"Ramya", 
     Id:64 
    }, 
    { 
     Name:"Navya", 
     Id:63 
    } 
    ]; 

}).directive("autoComplete",function(){ 
    return function(scope,element,attrs){ 
    var names =$.map(scope.availableTags,function(value){ return value.Name;   
}); 
     element.autocomplete({ 
     source: names 
    }); 


    }; 
});

Working jsbin

источник

2015-09-15 10:16:39

Вот как вы должны использовать API jQuery в проекте AngularJS (я считаю). Каждый раз, когда вы выполняете манипуляции с DOM Manipulation или jQuery, он должен быть помещен в директиву link: function() {}.

Возможно, основная проблема с вашим кодом заключалась в том, что source: $scope.persons.Id - это просто номер. sourc e должен быть массивом строк (по крайней мере, согласно документации). Поэтому я отделено все имена из persons массива и поместил их в новый массив peopleNames

<!doctype html> 
    <html lang="en" ng-app="myapp"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Autocomplete - Default functionality</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

     <script src="vendors/angular.min.js"></script> 
    </head> 
    <body ng-controller="controller"> 

     <div ng-repeat="p in persons">{{p.Name}} 
     </div> 

     <div class="ui-widget"> 
      <input type="text" id="tags" autocomplete-directive> 
     </div> 

     <script> 
     var app = angular.module("myapp",[]); 

    app.controller("controller",['$scope',function($scope){ 
     $scope.persons=[ 
         { 
       Name:"Bhavani", 
       Id:67 
     }, 
     { 
      Name:"Mamata", 
      Id:66 
     }, 
     { 
      Name:"Prasanna", 
      Id:65 
     }, 
     { 
      Name:"Ramya", 
      Id:64 
     }, 
     { 
      Name:"Navya", 
      Id:63 
     } 
     ]; 

     // array of only strings autocomplete 
     $scope.peopleNames = []; 

     for(var i = 0, j = $scope.persons.length; i < j; i++) { 
     $scope.peopleNames.push($scope.persons[i].Name); 
     } 

    }]); 

     app.directive('autocompleteDirective', [function($scope) { 
      return { 
      link: function(scope, element, attrs) { 
       element.autocomplete({ 
       source: scope.peopleNames 
       }); 
      } 
      }; 
     }]); 
     </script> 
    </body> 

    </html>

источник

2015-09-15 06:49:17 SuperVeetz

Спасибо за каждого за предложение мне ответить. Я также сделал по-другому. Он может помочь другим.

//html file 

<!DOCTYPE html> 
<html ng-app="myapp"> 
<head> 
<title>Auto Complete based on name</title> 
<script src="angularfiles/angular.js"></script> 
<script src="angularfiles/angular-animate.js"></script> 
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script> 
<script src="angularfiles/bootstrap-theme.css"></script> 
<script src="Jsfiles/autocomp.js"></script> 
</head> 
<body ng-controller="controller"> 


<div ng-repeat="p in persons">{{p}}</div> 
     <div class="ui-widget"> 
      <input type="text" ng-model="selected" typeahead="p.Name for p in persons | filter:$viewValue"> 

     </div> 
</body> 
</html> 

//js file 

var app = angular.module("myapp",['ui.bootstrap']); 

    app.controller("controller",['$scope',function($scope){ 

     $scope.persons=[ 
         { 
       Name:"Bhavani", 
       Id:67 
     }, 
     { 
      Name:"Mamata", 
      Id:66 
     }, 
     { 
      Name:"Prasanna", 
      Id:65 
     }, 
     { 
      Name:"Ramya", 
      Id:64 
     }, 
     { 
      Name:"Navya", 
      Id:63 
     } 
     ]; 

    }]);

источник

2015-09-15 10:45:53

Как получить автозаполнение в угловых js?

ответ

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