<!doctype html>
<html ng-app="plunker">
<head lang="en">
<meta charset="utf-8">
<title>AngularUI Plunker | input's type property CAN be changed</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="https://raw.github.com/mikoto/angular-ui/uiinput2/modules/directives/input2/input2.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Test for Dynamic Type</h1>
</div>
<p>
Please select a type and enter some inputs.<br />
These inputs are binded to a same model and variable 'type' is binded to select element.
</p>
<form class="form-horizontal">
<fieldset>
<legend>Select Type</legend>
<div class="control-group">
<label class="control-label">ng-model="type"</label>
<div class="controls">
<select ng-model="type">
<option value="text">text</option>
<option value="number">number</option>
<option value="checkbox">checkbox</option>
<option value="radio">radio</option>
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>Constant Type Inputs</legend>
<div class="control-group">
<label class="control-label">type="text"</label>
<div class="controls">
<input ng-model="data" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label">type="number"</label>
<div class="controls">
<input ng-model="data" type="number" />
</div>
</div>
<div class="control-group">
<label class="control-label">type="checkbox"</label>
<div class="controls">
<input ng-model="data" type="checkbox" />
</div>
</div>
<div class="control-group">
<label class="control-label">type="radio"</label>
<div class="controls">
<input ng-model="data" type="radio" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Variable Type Inputs</legend>
<div class="control-group">
<label class="control-label">type="{{type}}"</label>
<div class="controls">
<input ng-model="data" type="{{type}}" ui-input2 />
</div>
</div>
</fieldset>
</form>
</div>
<div class="row">
<div class="page-header">
<h1>Use Case: Type from Model</h1>
</div>
<form class="form-horizontal" ng-init="
form = {};
models=[
{
type: 'text',
name: 'fullname',
display: 'Full Name'
},
{
type: 'number',
name: 'age',
display: 'Age'
},
{
type: 'checkbox',
name: 'remember',
display: 'Remember me?'
}
];">
<div class="control-group" ng-repeat="model in models">
<label class="control-label">{{model.display}}</label>
<div class="controls">
<input ng-model="form[model.name]" type="{{model.type}}" name="{{model.name}}" ui-input2 />
</div>
</div>
</form>
<table class="table">
<tr ng-repeat="model in models">
<th>form[{{model.name}}]</th><td>{{form[model.name]}}</td>
</tr>
</table>
<pre class="well">models = {{models|json}};</pre>
<pre class="well">form = {{form|json}};</pre>
</div>
</section>
</body>
</html>
var app = angular.module('plunker', ['ui.directives']);