demo/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular libphonenumber Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="../dist/libphonenumber.js"></script>
<script src="../dist/angular-libphonenumber.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<script>
angular.module('demo', ['cwill747.phonenumber']);
function ctrl($scope) {
$scope.initializedPhoneNumber = '3133536767';
$scope.nonFormattedPhoneNumber = '';
}
</script>
</head>
<body ng-app="demo">
<form name="form" ng-controller="ctrl">
<h2>angular-libphonenumber</h2>
<label for="countrycode">Country Code:</label>
<input id="countrycode" type="text" name="countrycode" ng-model="countrycode"><br>
<label for="phoneNumberTest">Phone Number:</label>
<input id="phoneNumberTest" type="text" name="phoneNumberTest" ng-model="phoneNumber" phone-number
country-code="countrycode" non-formatted="nonFormattedPhoneNumber"><br>
<span id="phone-value">{{phoneNumber}}</span> - {{form.phoneNumberTest.$valid}}<br />
<span>Non-Formatted: <span id="phone-nonformatted">{{nonFormattedPhoneNumber}}</span></span> <br />
<div class="row">
<div class="col-xs-3">
<h3>Phone Number</h3>
<table class="table table-bordered">
<tbody>
<tr ng-class="{ success: form.phoneNumberTest.$valid, danger: form.phoneNumberTest.$invalid }">
<td>
Valid
</td>
</tr>
<tr ng-class="{ success: form.phoneNumberTest.$pristine, danger: !form.phoneNumberTest.$pristine }">
<td>
Pristine
</td>
</tr>
<tr ng-class="{ success: form.phoneNumberTest.$dirty }">
<td>Dirty</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>