AngularJS directive to generate a list of countries as options of the select element.
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']);
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>
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'}
]);
});
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.