Skip to content

🌍 AngularJS directive to generate a list of countries as options of the select element.

License

Notifications You must be signed in to change notification settings

Puigcerber/angular-country-picker

Repository files navigation

angular-country-picker

AngularJS directive to generate a list of countries as options of the select element.

Installation

You can install the directive using npm:

$ npm install angular-country-picker

Then you have to include it in your HTML:

<script src="node_modules/angular-country-picker/country-picker.js"></script>

And inject the module puigcerber.countryPicker as a dependency of your application:

angular.module('webApp', ['puigcerber.countryPicker']);

Usage

The directive is intended to be used as an attribute of the native select directive setting its ngOptions. Therefore ngModel is required for this to work.

<select ng-model="selectedCountry" pvp-country-picker></select>

Excluding ngOptions, any other optional attribute of the select directive could still be used.

<select name="country" ng-model="selectedCountry" pvp-country-picker ng-change="onChange()" required></select>

The default value to which ngModel is bound it's the two-letter country code, but this can be changed setting the attribute to one of the following values:

<select ng-model="selectedCountry" pvp-country-picker="name"></select>

Config

The country provider can be configured to set a custom list of countries.

angular.module('webApp', ['puigcerber.countryPicker'])
  .config(function(pvpCountriesProvider) {
    pvpCountriesProvider.setCountries([
      { name: 'Abkhazia', alpha2: 'AB'},
      { name: 'Kosovo', alpha2: 'XK'},
      { name: 'Nagorno-Karabakh', alpha2: 'NK'},
      { name: 'Northern Cyprus', alpha2: 'KK'},
      { name: 'Somaliland', alpha2: 'JS'},
      { name: 'South Ossetia', alpha2: 'XI'},
      { name: 'Transnistria', alpha2: 'PF'}
    ]);
  });

See also

ISO 3166 is the International Standard for country codes and codes for their subdivisions. Currently 249 countries, territories, or areas of geographical interest are assigned official codes in ISO 3166-1.

License

MIT © Pablo Villoslada Puigcerber

About

🌍 AngularJS directive to generate a list of countries as options of the select element.

Resources

License

Stars

Watchers

Forks

Packages

No packages published