Comments (1)
After working on this way more, I found the solution and I thought it was good for future reference to include it here for other people with the same issue.
I've noticed that the model was populated with a "complex" object, and not with a string. This allowed me to listen for select events of the component in my controller and set different fields (model) accordingly:
In the HTML I have
input g-places-autocomplete options="vm.autocompleteOptions" id="street" ng-model="vm.property.street" type="text" class="form-control" autocomplete="off" required autofocus>
and
<input id="zipcode" ng-model="vm.property.zipcode" type="text" value="20100" maxlength="5" class="form-control" required autofocus>
What I wanted to achieve was: as soon as a user selects the full address from the autocomplete (while typing an address), put the street address only in the street text input, and the related zipcode only in the zipcode text input.
Js (controller)
Please note I use controllerAs and this instead of $scope only. I've also used lodash to retrieve the zipcode from the object.
// When a street is choosen from the google autocomplete options, set the street only // address in the street field of the form, and the zipcode in the zipcode field of // the form $scope.$on('g-places-autocomplete:select', (event, param) => { this.property.street = param.name; this.property.zipcode = _.find(param.address_components, function (o) { return o.types[0] === 'postal_code'; }).short_name; });
Hope it helps, since it took me a while to figure this out!
Thanks again for the great plugin, ciao!
-Luca
from angular-google-places-autocomplete.
Related Issues (20)
- Language selection HOT 2
- Clear Input Returns last selected location
- usemin task error
- how to add the access google.places directive from the controller ?
- library needs to be updated such that we can add multiple countries restriction HOT 1
- Location is not getting selected on just touch but have to do long press on android.
- Is this Possible to use this directive in ng-repeat
- Auto complete is not working HOT 2
- InvalidValueError: not an instance of HTMLInputElement HOT 2
- Pasting a value does not open the drawer
- g-places-autocomplete not working on android build
- doesn't works anymore HOT 18
- Input box gets hide HOT 5
- Flaky in IE 11
- Auto suggestion suddenly stops working on android and ios devices
- Exclude extra data requests to google api HOT 2
- How to check in controller that specific prediction is clicked or not?
- How to handle Session Tokens on Request Level?
- How can i billed and change API keys
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-google-places-autocomplete.