<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="jquery@2.1.3" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>
<script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-aria.min.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form name="myForm" class="col-md-8" ng-controller="MainController">
<div class="control-group">
<label class="control-label" for="firstName">First Name:</label>
<div class="controls">
<input type="text" name="firstName" placeholder="First Name" ng-model="person.firstName" ng-pattern="patternFirstName" ng-required="requireFirstName" ng-change="updateFullName()" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastName">Last Name:</label>
<div class="controls">
<input type="text" name="lastName" placeholder="Last Name" ng-model="person.lastName" ng-pattern="patternLastName" ng-required="requireLastName" ng-change="updateFullName()" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="phoneNumber">Phone Number:</label>
<div class="controls">
<input type="text" name="phoneNumber" placeholder="03-1234-5678" ng-model="person.phoneNumber" ng-pattern="patternPhoneNumber" ng-required="true" />
</div>
</div>
<div class="control-group col-md-8">
<h1>{{ person.fullName }}</h1>
<h3>{{ person.phoneNumber }}</h3>
<p>Valid: {{myForm.$valid}}</p>
<p>Pristine: {{myForm.$pristine}}</p>
</div>
</form>
</body>
</html>
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('MainController', ['$scope', function($scope) {
$scope.person = {
firstName: '',
lastName: '',
fullName: '',
phoneNumber: ''
};
$scope.updateFullName = function () {
$scope.person.fullName = $scope.person.firstName + " " + $scope.person.lastName;
};
$scope.patternPhoneNumber = (function() {
var regexp = /^[0-9]*$/;
return {
test: function(value) {
if ($scope.requirePhoneNumber === false) {
return true;
}
return regexp.test(value);
}
};
})();
$scope.patternFirstName = (function() {
var regexp = /^[a-zA-Z]*-*$/;
return {
test: function(value) {
if ($scope.requireFirstName === false) {
return true;
}
return regexp.test(value);
}
};
})();
$scope.patternLastName = (function() {
var regexp = /^[a-zA-Z]*-*$/;
return {
test: function(value) {
if ($scope.requireLastName === false) {
return true;
}
return regexp.test(value);
}
};
})();
$scope.updateFullName();
}
]);
/* Styles go here */
input.ng-invalid {
border:1px solid #f00;
}
(function() {
'use strict';
angular.module('myApp')
.factory('myService', function() {
var getCountryList = function() {
return ['Afghanistan', 'Aland', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antarctica', 'Antigua and Barbuda',
'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium',
'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory',
'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Canaries Islands', 'Cape Verde', 'Cayman Islands',
'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo', 'Congo (DRC)',
'Cook Islands', 'Costa Rica', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Côte d\'Ivoire', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic',
'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Falkland Islands (Islas Malvinas)', 'Faroe Islands',
'Fiji Islands', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'French Southern and Antarctic Lands', 'Gabon', 'Gambia', 'Georgia',
'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti',
'Heard Island and McDonald Islands', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel',
'Italy', 'Jamaica', '日本', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia',
'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macao SAR', 'Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta',
'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro',
'Montserrat', 'Morocco', 'Mozambique', 'Myanmar', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand',
'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'North Korea', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Palestinien occupe',
'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn Islands', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reunion', 'Romania',
'Russia', 'Rwanda', 'Sahara occidental', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Serbie et montenegro',
'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia and the South Sandwich Islands',
'South Korea', 'Spain', 'Sri Lanka', 'St. Helena', 'St. Kitts and Nevis', 'St. Lucia', 'St. Pierre and Miquelon', 'St. Vincent and the Grenadines', 'Sudan',
'Suriname', 'Svalbard and Jan Mayen', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-leste', 'Togo',
'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine',
'United Arab Emirates', 'United Kingdom', 'United States', 'United States Minor Outlying Islands', 'Uruguay', 'Uzbekistan', 'Vanuatu',
'Vatican City', 'Venezuela', 'Vietnam', 'Virgin Islands', 'Virgin Islands (British)', 'Wallis and Futuna', 'Yemen', 'Zambia', 'Zimbabwe']
};
return {
formHelpers: function() {
return {
events: {
validateForm: angular.noop,
isFormValid: angular.noop,
doCalculations: angular.noop
},
countries: getCountryList
}
}
};
})();