<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://dl.dropboxusercontent.com/s/ry2nis85796b9w7/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/0riz5lmyjcjbyjr/bootstrap.min.js?m="></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script data-require="angular-route@1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div ng-app ng-controller="Controller" class="container">
<h4>Inputs</h4>
<ul ng-repeat="input in inputs">
<li><span>{{input.name}} : </span>
<div ng-switch="input.type" ng-form="myfrm">
<div ng-switch-when="text">
<input type="text" ng-model="outputs[input.name]"/>
</div>
<div ng-switch-when="email" class="form-group" >
<input type="email" ng-model="outputs[input.name]" name="input" ng-required="input.required">
<P ng-show="myfrm.input.$invalid && !myform.input.$pristine">Please enter a valid email</P>
</div>
<div ng-switch-when="number">
<input type="number" ng-model="outputs[input.name]" ng-required="input.required" name="input"/>
<P ng-if="myfrm.input.$invalid">Please enter a valid number</P>
</div>
<div ng-switch-when="url">
<input type="number" ng-model="outputs[input.name]"/>
</div>
<div ng-switch-when="checkbox">
<input type="checkbox" ng-model="outputs[input.name]" ng-checked="outputs[input.name]" value="outputs[input.name]"/>
</div>
</div>
</li>
</ul>
<h4>Outputs</h4>
<ul ng-repeat="input in inputs">
<li>{{input.name}} : {{outputs[input.name]}}</li>
</ul>
</div>
</body>
<script>
function Controller($scope) {
$scope.outputs = {};
$scope.inputs = [{
type: "email",
name: "email",
required:true
}, {
type: "text",
name: "name",
required:true
}, {
type: "number",
name: "phonenumber",
required:true
}, {
type: "checkbox",
name: "whant to check",
},
{
type: "url",
name: "server Url",
}];
}
</script>
</html>
// Code goes here
/* Styles go here */