iEat2/web/js/templates/unitEditor.html

<!-- unitEditor -->
<div>
  <div class="form-group">
    <table class="table">
      <tr>
        <td colspan="2">
          <input type="text"
                 style="text-align: center;"
                 class="form-control"
                 data-ng-model="$ctrl.unit.name">
        </td>
      </tr>
      <tr>
        <td>
          <label for="symbol">Symbol:</label>
          <input id="symbol"
                 class="form-control"
                 type="text"
                 data-ng-model="$ctrl.unit.symbol" />
        </td>
        <td>
          <label for="conversion">Conversion:</label>
          <input id="conversion"
                 class="form-control"
                 type="number"
                 data-ng-model="$ctrl.unit.conversion" />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <label for="type">Type:</label>
          <select id="type" class="form-control"
                  data-ng-model="$ctrl.unit.type"
                  data-ng-options="type.toLowerCase() as type for type in unitTypes">
          </select>
        </td>
      </tr>
      <tr>
        <table class="table table-hover table-responsive">
          <tr>
            <td colspan="2">
              <label for="newAlias">Aliases:</label>
              <input id="newAlias" class="form-control" type="text"
                     data-ng-model="newAlias"
                     data-my-on-enter="addAlias(newAlias);" />
            </td>
          </tr>
          <tr data-ng-repeat="alias in $ctrl.unit.aliases">
            <td style="width: 100%; padding-left: 1em;">
              <span>{{alias}}</span>
            </td>
            <td>
              <button class="btn btn-danger" data-ng-click="deleteAlias($index)">
                Delete
              </button>
            </td>
          </tr>
        </table>
      </tr>
    </table>
  </div>
</div>