<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:ng="http://angularjs.org" ng-app>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="../../../src/angular-bootstrap.js"></script>
  </head>
  <body ng-init="$window.$scope = this">
    <table>
      <tr>
        <th width="330">Description</th>
        <th>Test</th>
        <th>Result</th>
      </tr>
      <tr><th colspan="3">Input text field</th></tr>
      <tr>
        <td>basic</td>
        <td id="text-basic-box">
          <input type="text" ng-model="text.basic"/>
        </td>
        <td>text.basic={{text.basic}}</td>
      </tr>
      <tr>
        <td>password</td>
        <td><input type="password" ng-model="text.password" /></td>
        <td>text.password={{text.password}}</td>
      </tr>
      <tr>
        <td>hidden</td>
        <td><input type="hidden" ng-model="text.hidden" ng-init="text.hidden='hiddenValue'" /></td>
        <td>text.hidden={{text.hidden}}</td>
      </tr>
      <tr><th colspan="3">Input selection field</th></tr>
      <tr id="gender-box" ng-init="gender='male'">
        <td>radio</td>
        <td>
         <input type="radio" ng-model="gender" value="female"/> Female <br/>
         <input type="radio" ng-model="gender" value="male"/> Male
        </td>
        <td>gender={{gender}}</td>
      </tr>
      <tr>
        <td>checkbox</td>
        <td ng-init="checkbox={'tea': true, 'coffee': false}">
         <input type="checkbox" ng-model="checkbox.tea" value="on"/> Tea<br/>
         <input type="checkbox" ng-model="checkbox.coffee" value="on"/> Coffe
        </td>
        <td>
          <pre>checkbox={{checkbox}}</pre>
        </td>
      </tr>
      <tr>
        <td>select</td>
        <td>
          <select ng-model="select">
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
        </td>
        <td>select={{select}}</td>
      </tr>
      <tr>
        <td>multiselect</td>
        <td>
          <select ng-model="multiselect" multiple>
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
        </td>
        <td>multiselect={{multiselect}}</td>
      </tr>
      <tr><th colspan="3">Buttons</th></tr>
      <tr>
        <td>ng-change<br/>ng-click</td>
        <td ng-init="button.count = 0; form.count = 0;">
          <form ng-submit="form.count = form.count + 1">
           <input type="button" value="button" ng-click="button.count = button.count + 1"/> <br/>
           <input type="submit" value="submit input" ng-click="button.count = button.count + 1"/><br/>
           <button type="submit">submit button</button>
           <input type="image" src="" ng-click="button.count = button.count + 1"/><br/>
           <a href="" ng-click="button.count = button.count + 1">action</a>
          </form>
        </td>
        <td>button={{button}} form={{form}}</td>
      </tr>
      <tr><th colspan="3">Repeaters</th></tr>
      <tr id="repeater-row">
        <td>ng-repeat</td>
        <td>
          <ul>
            <li ng-repeat="name in ['misko', 'adam']">{{name}}</li>
          </ul>
        </td>
        <td></td>
      </tr>
    </table>
  </body>
 </html>
