protractor/testapp/form/form.html

Webdriver E2E test wrapper for Angular.

<p>Forms using different types of input</p>

<div>
  <h4>Bindings</h4>
  <span>{{greeting}}</span>
  <span data-ng-bind="username"></span>
  <span data-ng-bind-template="({{nickname|uppercase}})"></span>
</div>

<div>
  <h4>Text</h4>
  <label>Username</label>
  <input ng-model="username" type="text"/>
  <label>Nickname</label>
  <input ng-model="nickname" type="text"/>
</div>

<div>
  <h4>Textarea</h4>
  <textarea ng-model="aboutbox"></textarea>
</div>

<div>
  <h4>Multiple input radio</h4>
  <div ng-style="{'color': color}">Color <br/>
    <input ng-model="color" value="blue" type="radio"/> blue <br/>
    <input ng-model="color" value="green" type="radio"/> green <br/>
    <input ng-model="color" value="red" type="radio"/> red <br/>
  </div>
</div>

<div>
  <h4>Selects</h4>
  <div ng-repeat="dayColor in dayColors">
    <select ng-model="dayColor.color" ng-options="c for c in colors"></select>
  </div>

  <select ng-model="fruit" ng-options="fruit for fruit in fruits">
    <option value="">{{defaultFruit}}</option>
  </select>
  <span>Fruit: {{fruit}}</span>
</div>

<div id="checkboxes">
  <h4>Checkboxes</h4>
  <input ng-model="show" type="checkbox"/> Show?
  <span id="shower" ng-show="show">Shown!!</span>
  <input ng:model="check.w" ng-true-value="w" type="checkbox"/> W
  <input data-ng-model="check.x" ng-true-value="x" type="checkbox"/> X
  <input x-ng-model="check.y" ng-true-value="y" type="checkbox"/> Y
  <input ng_model="check.z" ng-true-value="z" type="checkbox"/> Z

  <span id="letterlist">{{check.w}}{{check.x}}{{check.y}}{{check.z}}</span>
</div>

<div>
  <h4>Drag and Drop</h4>
  <input type="range" name="points" min="1" max="10" value="1">
</div>

<div>
  <h4>Alert trigger</h4>
  <button id="alertbutton" ng-click="doAlert()">Open Alert</button>
</div>

<div>
  <h4>Buttons</h4>
  <button id="exacttext">Exact text</button>
  <button id="otherbutton">Partial button text</button>
  <button id="trapbutton">No match</button>
  <button id="hiddenbutton" style="display:none">Can't see me!</button>
  <input type="submit" value="Exact text" id="submitbutton"/>
  <input type="button" value="Hello text" id="inputbutton"/>
</div>

<div id="inner">
  <h4>Inner text</h4>
  <ul>
    <li class="pet" id="bigdog">Big dog</li>
    <li class="pet" id="smalldog">Small dog</li>
    <li class="notpet" id="otherdog">Other dog</li>
    <li class="pet" id="cat">Cat</li>
  </ul>
</div>