angular-country-picker

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

Installation

You can install the directive using Bower:

$ bower install angular-country-picker

Or npm:

$ npm install angular-country-picker

Then you have to include it in your HTML:

<script src="bower_components/angular-country-picker/country-picker.js"></script>
<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:

• alpha2: two-letter country code defined in ISO 3166-1 alpha-2.
• alpha3: three-letter country code defined in ISO 3166-1 alpha-3.
• numeric: three-digit country code defined in ISO 3166-1 numeric.
• name: the English name of the country.

<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