i have input field fetches location based on user search. using ng-automplete directive , working well. planning add loading bar when user searches. once start typing, loading bar shown until list returned ng-autocomplete. added loading image input field this.
<div class="col-md-3 form-group fake-input"> <input type="text" ng-autocomplete ng-model="searchlocation" class="form-control input-lg" options="locationfilter"> <span ng-show="searchstatus()"> <img src="<%= asset_path ('search-spinner.gif') %>" width=25 /> </span> </div> i added ng-show show , hide image based on search result. unable figure out put searchstatus scope in ng-autocomplete..could tell me set that. if controller can use $scope.searchstatus = true or so. directive confused on how that..
here directive code
'use strict'; /** * directive adding google places autocomplete text box * google places autocomplete info: https://developers.google.com/maps/documentation/javascript/places * * usage: * * <input type="text" ng-autocomplete ng-model="autocomplete" options="options" details="details/> * * + ng-model - autocomplete textbox value * * + details - more detailed autocomplete result, includes address parts, latlng, etc. (optional) * * + options - configuration autocomplete (optional) * * + types: type, string, values can 'geocode', 'establishment', '(regions)', or '(cities)' * + bounds: bounds, google maps latlngbounds object, biases results bounds, may return results outside these bounds * + country: country string, iso 3166-1 alpha-2 compatible country code. examples; 'ca', 'us', 'gb' * + watchenter: boolean, true; on enter select top autocomplete result. false(default); enter ends autocomplete * * example: * * options = { * types: '(cities)', * country: 'ca' * } **/ angular.module( "ngautocomplete", []) .directive('ngautocomplete', function() { return { require: 'ngmodel', scope: { ngmodel: '=', options: '=?', details: '=?' }, link: function(scope, element, attrs, controller) { //options autocomplete var opts var watchenter = false //convert options provided opts var initopts = function() { opts = {} if (scope.options) { if (scope.options.watchenter !== true) { watchenter = false } else { watchenter = true } if (scope.options.types) { opts.types = [] opts.types.push(scope.options.types) scope.gplace.settypes(opts.types) } else { scope.gplace.settypes([]) } if (scope.options.bounds) { opts.bounds = scope.options.bounds scope.gplace.setbounds(opts.bounds) } else { scope.gplace.setbounds(null) } if (scope.options.country) { opts.componentrestrictions = { country: scope.options.country } scope.gplace.setcomponentrestrictions(opts.componentrestrictions) } else { scope.gplace.setcomponentrestrictions(null) } } } if (scope.gplace == undefined) { scope.gplace = new google.maps.places.autocomplete(element[0], {}); } google.maps.event.addlistener(scope.gplace, 'place_changed', function() { var result = scope.gplace.getplace(); if (result !== undefined) { if (result.address_components !== undefined) { scope.$apply(function() { scope.details = result; controller.$setviewvalue(element.val()); }); } else { if (watchenter) { getplace(result) } } } }) //function retrieve autocompletes first result using autocompleteservice var getplace = function(result) { var autocompleteservice = new google.maps.places.autocompleteservice(); if (result.name.length > 0){ autocompleteservice.getplacepredictions( { input: result.name, offset: result.name.length }, function listentoresult(list, status) { if(list == null || list.length == 0) { scope.$apply(function() { scope.details = null; }); } else { var placesservice = new google.maps.places.placesservice(element[0]); placesservice.getdetails( {'reference': list[0].reference}, function detailsresult(detailsresult, placesservicestatus) { if (placesservicestatus == google.maps.geocoderstatus.ok) { scope.$apply(function() { controller.$setviewvalue(detailsresult.formatted_address); element.val(detailsresult.formatted_address); scope.details = detailsresult; //on focusout value reverts, need set again. var watchfocusout = element.on('focusout', function(event) { element.val(detailsresult.formatted_address); element.unbind('focusout') }) }); } } ); } }); } } controller.$render = function () { var location = controller.$viewvalue; element.val(location); }; //watch options provided directive scope.watchoptions = function () { return scope.options }; scope.$watch(scope.watchoptions, function () { initopts() }, true); } }; }); in app.js thing use directive this
$scope.locationfilter = { country: 'ca', types: '(cities)' }; $scope.details2 = '';
Comments
Post a Comment