Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smikodanic/angular-countries
Angular module to create selectable country list with country ISO codes and dialing codes.
https://github.com/smikodanic/angular-countries
Last synced: 30 days ago
JSON representation
Angular module to create selectable country list with country ISO codes and dialing codes.
- Host: GitHub
- URL: https://github.com/smikodanic/angular-countries
- Owner: smikodanic
- Created: 2016-10-19T12:45:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-16T13:56:43.000Z (almost 8 years ago)
- Last Synced: 2024-12-19T13:32:01.754Z (about 1 month ago)
- Language: JavaScript
- Size: 28.3 KB
- Stars: 5
- Watchers: 2
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-countries
> Angular module to create selectable country list with country ISO codes and dialing codes.
## 1. Installation
`npm install angular-countries`
## 2. Description
A list of countries for Angular apps.
- fast and easy to integrate module
- country names
- country ISO codes
- country dialing numbers
Country is selectable as you type.
## 3. JSON Format
Countries are in JSON format.
```json
[
{
"name": "Afghanistan",
"dial_code": "+93",
"code": "AF"
},
{
"name": "Aland Islands",
"dial_code": "+358",
"code": "AX"
},
{
"name": "Albania",
"dial_code": "+355",
"code": "AL"
},
{
"name": "Algeria",
"dial_code": "+213",
"code": "DZ"
},
{
"name": "AmericanSamoa",
"dial_code": "+1684",
"code": "AS"
},
{
"name": "Andorra",
"dial_code": "+376",
"code": "AD"
}
]
```
## 4. Angular Directive
Directive is **ngcountries** and must be applied with INPUT tag:
```html
```
*Notice:* This directive will produce [datalist](http://www.w3schools.com/tags/tag_datalist.asp) tag.
## 5. Usage
### If you use browserify in your angular project
```javascript
require('angular-countries');
var clientApp = angular.module('clientApp', [
'ngCountries'
]);
```
### If you use compiled version (/dist/ folder) include it in HTML file
```html
```
## 6. Complete bootstrap code
Just copy & paste .
```html
Country
```
## 7. Get selected country object
In order to get complete country object add *ng-controller="ngCountriesCtrl" ng-blur="getCountryObj(userDoc.country, callback)* .
```html
```
and define collback function inside your controller:
```javascript
$scope.callback = function (selectedCountryObj) {
console.log(selectedCountryObj);
};
```
Returned country object **selectedCountryObj** will be for example:
```json
{
"name": "Croatia",
"dial_code": "+385",
"code": "HR"
}
```
Also you can use this callback to get 'dial_code' and put it into 'phone' input tag.
So when you select country this 'dial_code' will be inserted into 'phone' field automatically.
```
//in controller
$scope.callback = function (selectedCountryObj) {
$scope.userDoc.phone = selectedCountryObj.dial_code;
};
//in HTML file
```
The result is:
## 8. Licence
*Copyright (c) 2016 Saša Mikodanić*
Licensed under [MIT](https://opensource.org/licenses/MIT) .