Abhay Sharma Abhay Sharma - 4 months ago 253
AngularJS Question

How to use ng-autocomplete with Firebase

I wan to use ng-autocomplete with firebase have a look of my html



<!DOCTYPE html>
<html ng-app="Test">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"href="style.css">

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="script.js"></script>
<script src="ngAutocomplete.js"></script>


</head>

<body>

<div ng-controller="TestCtrl">

<form id="form" role="form">

<div class="form-group move-down">
<label for="Autocomplete">Generic Autocomplete</label>
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1"/>
</div>
<div>result: {{result}}</div>

</form>
</div>


</body>
</html>





and this is my script.js



angular.module( "Test", ['ngAutocomplete'])
.controller("TestCtrl",function ($scope) {

$scope.result1 = '';
$scope.options1 = null;
$scope.details1 = '';

});





and this is ngAutocomplete.js



angular.module( "ngAutocomplete", [])
.directive('ngAutocomplete', function($parse) {
return {

scope: {
details: '=',
ngAutocomplete: '=',
options: '='
},

link: function(scope, element, attrs, model) {

//options for autocomplete
var opts

//convert options provided to opts
var initOpts = function() {
opts = {}
//if (scope.options) {
/*if (scope.options.types) {
opts.types = []
opts.types.push(scope.options.types)
}*/


// }
}
initOpts()

//create new autocomplete
//reinitializes on every change of the options provided
var newAutocomplete = function() {
scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
if (scope.details) {
scope.details = scope.gPlace.getPlace();
}
scope.ngAutocomplete = element.val();
});
})
}
newAutocomplete()

//watch options provided to directive
scope.watchOptions = function () {
return scope.options
};
scope.$watch(scope.watchOptions, function () {
initOpts()
newAutocomplete()
element[0].value = '';
scope.ngAutocomplete = element.val();
}, true);
}
};
});





i want to use autocomplete instead of google map Api. So could you please give me idea how to i can use it.

Answer

Instead of this

<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1"/>

it should be

<input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result1" details="details1" options="options1" />

Please find working plunker here

see documentation of ngAutocomplete here

Comments