Как реализовать Autocomplete TextBox с помощью AngularJS?

Question

У меня есть текстовое поле, в то время как я начинаю вводить текст, для выбора должны появиться предопределенные слова.

<input type="text"></input> 

У меня есть список предметов. только это должно показать. как заставить его работать? Контроллер следует.

angular.module('starter.controllers', []) 
      .controller('AppCtrl', function($scope, $ionicModal, $timeout, authService, $state, $http,$ionicLoading) 
     { 
      $scope.loginSubmitted = false; 
     $scope.myflag = false; 
     $scope.User = {}; 
     $scope.toast = function(){ 
     $ionicLoading.show({ 
     template: 'wrong credentials' 
    }); 
    $timeout(function() { 
     $ionicLoading.hide(); 
    }, 1000); 
    } 

     $scope.doLogin = function() { 

    $scope.loginSubmitted = true; 
    $scope.loginstatus==0; 
    authService.GetByUsername().success(function(data) { 
    $scope.UserData = data; 
    console.log($scope.UserData); 
    for (var i = 0; i < $scope.UserData.length; i++) { 
     if ($scope.UserData[i].UserName == $scope.User.UserName && $scope.UserData[i].Password == $scope.User.Password) { 

     $scope.loginstatus=1; 
     break; 
     } 
    } 
    if($scope.loginstatus==1){ 
     $state.go('app.single') 
    } 
    else { 
     console.log('wrong credentials'); 
     $scope.toast(); 
     } 
    }).error(function(err) { 
    console.log(err); 
    }); 
} 
}).controller('PlaylistsCtrl', function($scope) { 

}).controller('EmployeeCntrl', function($scope, $stateParams) { 

    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"]; 

    $scope.data = {}; 

    //$scope.data.date = new Date().toDateString(); 
    $scope.data.FromDate = new Date(); 
    $scope.employees = [{name: "vishnu"}, {name: "seenu"}]; 

    $scope.selectedEmployee = $scope.employees[0].name; 

    $scope.projects = [{name: "crwhy"}, {name: "big in"}]; 
    $scope.selectedProject = $scope.projects[0].name; 
    $scope.logdata = function(form) { 
    console.log($scope.data); 
    } 
}); 

Теперь вы можете сделать это согласно требованиям?

Answer 1

У вас есть несколько плагинов для него: - http://ngmodules.org/modules/ngAutocomplete

у меня есть что-то простое с директивой: -

Контроллер Coding: -

function DefaultCtrl($scope) { 
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"]; 
} 

angular.module('MyModule', []).directive('autoComplete', function($timeout) { 
    return function(scope, iElement, iAttrs) { 
      iElement.autocomplete({ 
       source: scope[iAttrs.uiItems], 
       select: function() { 
        $timeout(function() { 
         iElement.trigger('input'); 
        }, 0); 
       } 
      }); 
    }; 
}); 

HTML: -

<div ng-app='MyModule'> 
    <div ng-controller='DefaultCtrl'> 
     <input auto-complete ui-items="names" ng-model="selected"> 
     selected = {{selected}} 
    </div> 
</div> 

Использование в качестве ресурсов http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css https://code.angularjs.org/1.0.0/angular-1.0.0.js

Скрипки: -

http://jsfiddle.net/sebmade/swfjT/

Answer 2

Вы можете использовать библиотеку Select2.

, например:

var app = angular.module('myApp', []); 
 
app.controller('listCtrl', function($scope) { 
 
    $scope.selectedItem; 
 
    $scope.list = [ 
 
    {value:"AL",name:"Alabama"},{value:"WY",name:"Wyoming"} 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script> 
 
<div ng-app="myApp" data-ng-controller="listCtrl"> 
 

 
<select style="width:200px" class="select2" data-ng-model="selectedItem" data-ng-options="item.name for item in list"> 
 
    
 
</select> 
 
    </div> 
 

 
<script> 
 
$(document).ready(function() { 
 
    $(".select2").select2(); 
 
    
 
}); 
 
</script>