在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):vskosp/vsGoogleAutocomplete开源软件地址(OpenSource Url):https://github.com/vskosp/vsGoogleAutocomplete开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):vsGoogleAutocompleteAngularjs autocomplete module using Google Maps JavaScript API v3 and embedded autocomplete validator
DemoFeatures
InstallBowerbower install vs-google-autocomplete Getting started
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
angular.module('yourApp', ['vsGoogleAutocomplete']);
<form>
<input vs-google-autocomplete
ng-model="address"
name="address"
type="text">
</form> Autocomplete optionsYou can add an options object as attribute parameter, which will restrict autocomplete results. Options object can contain the following properties:
Example: <form>
<input vs-google-autocomplete="options"
ng-model="address"
name="address"
type="text">
</form> $scope.options = {
types: ['(cities)'],
componentRestrictions: { country: 'FR' }
} In example above, autocomplete results will only consist of cities of France. Parsing address componentsYou can bind your model with autocomplete address components. Directives for parsing:
Example: <form>
<input vs-google-autocomplete="options"
ng-model="address.name"
vs-place="address.place"
vs-place-id="address.components.placeId"
vs-street-number="address.components.streetNumber"
vs-street="address.components.street"
vs-city="address.components.city"
vs-state="address.components.state"
vs-country-short="address.components.countryCode"
vs-country="address.components.country"
vs-district = "address.components.district"
name="address"
type="text">
</form> Embedded validatorModule, as an addition, also provides special validator for autocomplete validation. Default usage
<form>
<input vs-google-autocomplete
vs-autocomplete-validator
ng-model="address"
name="address"
type="text">
</form> By default, validator checks if autocomplete result is a valid google address (selected from drop down list). Additional validatorsYou can add additional validator by adding denormalized validator name as attribute parameter. If you need more than one additional validator, you can add validator names using comma( Validator names in html are normalized in javascript code, so validator with name Available validator names
This module is under development and now it has only one additional validator (and one by default). Please, if you need other additional validators, you can write about this in issues, we will be grateful to you :). Example <form>
<input vs-google-autocomplete
vs-autocomplete-validator="vs-street-address"
ng-model="address"
name="address"
type="text">
</form> In the example above validator will checks if autocomplete result is a valid google address and if it is a full address (street number, street, ...). Validation errorsValidator publishes validation errors if validation is failed. If validation is failed, validator publish error with name Custom validatorsYou can also add your own validator for your own needs. Embedded validator should validate PlaceResult object, which returns after autocomplete. For this, you should add factory to your main module, which must return function. Custom validator template: angular.module('yourApp')
.factory('validatorName', function() {
/**
* Implementation of custom embedded validator.
* @param {google.maps.places.PlaceResult} PlaceResult object.
* @return {boolean} Valid status (true or false)
*/
function validate(place) {
// ...
}
return validate;
}); Rules for custom validator:
After adding custom validator, you should add its name as attribute parameter to Core developers can inject in validator factory AuthorK.Polishchuk (http://github.com/vskosp) LicenseMIT © K.Polishchuk CreditsGoogle Maps JavaScript API https://developers.google.com/maps/documentation/javascript/places-autocomplete |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论