Standard HTML Widgets
The most common widgets you will use will be in the from of the standard HTML set.
Usage
| Declaration | See table below |
|---|---|
| Data Format | All widgets are bound to primitive data types, such as text, boolean, or array. |
| name | Location in current scope where the data is bound to. |
Examples
try entering text into fields and notice the format of the data.
| Name | Format | HTML | UI | {{input#}} |
|---|---|---|---|---|
| text | String | <input type="text" name="input1"> | {{input1|json}} | |
| textarea | String | <textarea name="input2"></textarea> | {{input2|json}} | |
| radio | String |
<input type="radio" name="input3" value="A"> <input type="radio" name="input3" value="B"> |
{{input3|json}} | |
| checkbox | String | <input type="checkbox" name="input4" value="checked"> | {{input4|json}} | |
| pulldown | String |
<select name="input5"> <option value="c">C</option> <option value="d">D</option> </select> |
{{input5|json}} | |
| multiselect | Array |
<select name="input6" multiple size="4"> <option value="e">E</option> <option value="f">F</option> </select> |
{{input6|json}} |
try entering text into fields and notice the format of the data.
| Name | Format | HTML | UI | {{input#}} |
|---|---|---|---|---|
| text | String | <input type="text" name="input1"> | {{input1|json}} | |
| textarea | String | <textarea name="input2"></textarea> | {{input2|json}} | |
| radio | String |
<input type="radio" name="input3" value="A"> <input type="radio" name="input3" value="B"> |
{{input3|json}} | |
| checkbox | String | <input type="checkbox" name="input4" value="checked"> | {{input4|json}} | |
| pulldown | String |
<select name="input5"> <option value="c">C</option> <option value="d">D</option> </select> |
{{input5|json}} | |
| multiselect | Array |
<select name="input6" multiple size="4"> <option value="e">E</option> <option value="f">F</option> </select> |
{{input6|json}} |
<html>
<head>
<script type="text/javascript"
src="http://angular.getangular.com/angular-1.0a.js#database=docsdb"></script>
</head>
<body>
try entering text into fields and notice the format of the data.
<table>
<tr>
<th>Name</th>
<th>Format</th>
<th>HTML</th>
<th>UI</th>
<th ng-non-bindable>{{input#}}</th>
</tr>
<tr>
<th>text</th>
<td><tt>String</tt></td>
<td><tt><input type="text" name="input1"></tt></td>
<td><input type="text" name="input1" size="4"></td>
<td><tt>{{input1|json}}</tt></td>
</tr>
<tr>
<th>textarea</th>
<td><tt>String</tt></td>
<td><tt><textarea name="input2"></textarea></tt></td>
<td><textarea name="input2" cols='6'></textarea></td>
<td><tt>{{input2|json}}</tt></td>
</tr>
<tr>
<th>radio</th>
<td><tt>String</tt></td>
<td><tt>
<input type="radio" name="input3" value="A"><br>
<input type="radio" name="input3" value="B">
</tt></td>
<td>
<input type="radio" name="input3" value="A">
<input type="radio" name="input3" value="B">
</td>
<td><tt>{{input3|json}}</tt></td>
</tr>
<tr>
<th>checkbox</th>
<td><tt>String</tt></td>
<td><tt><input type="checkbox" name="input4" value="checked"></tt></td>
<td><input type="checkbox" name="input4" value="checked"></td>
<td><tt>{{input4|json}}</tt></td>
</tr>
<tr>
<th>pulldown</th>
<td><tt>String</tt></td>
<td><tt>
<select name="input5"><br>
<option value="c">C</option><br>
<option value="d">D</option><br>
</select><br>
</tt></td>
<td>
<select name="input5">
<option value="c">C</option>
<option value="d">D</option>
</select>
</td>
<td><tt>{{input5|json}}</tt></td>
</tr>
<tr>
<th>multiselect</th>
<td><tt>Array</tt></td>
<td><tt>
<select name="input6" multiple size="4"><br>
<option value="e">E</option><br>
<option value="f">F</option><br>
</select><br>
</tt></td>
<td>
<select name="input6" multiple size="4">
<option value="e">E</option>
<option value="f">F</option>
</select>
</td>
<td><tt>{{input6|json}}</tt></td>
</tr>
</table>
</body>
</html>Note: for Internet Explorer compatibility when working with HTML option element the value attribute is REQUIRED!
Retrieved from "http://docs.getangular.com/Widget"