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

Then you have to include it in your HTML:

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

And inject the module angular-country-picker as a dependency of your application:

angular.module('webApp', ['angular-country-picker']);

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>

Besides ngOptions which is set automatically by this directive, any other optional attribute of the select directive could be used.

<select name="country" ng-model="selectedCountry" pvp-country-picker 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>

Testing

To run the tests:

$ npm install && bower install
$ npm install -g karma-cli
$ npm run test

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.