iEat2/web/js/templates/basicFoodEditor.html

<!-- basicFoodEditor -->
<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.food.name">
        </td>
      </tr>
      <tr>
        <td>
          <label for="ndbno">ndbno:</label>
          <input id="ndbno"
                 class="form-control"
                 type="number"
                 data-ng-model="$ctrl.food.ndbno"
                 readonly="readonly" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="calories">
            Calories/100{{units_symbol[$ctrl.food.unit_type]}}:
          </label>
          <input id="calories"
                 class="form-control"
                 type="number"
                 data-ng-model="$ctrl.food.calories_p_100" />
        </td>
        <td>
          <label for="density">Density (g/ml):</label>
          <input id="density"
                 class="form-control"
                 type="number"
                 data-ng-model="$ctrl.food.density" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="unit">Unit:</label>
          <select id="unit"
                  class="form-control"
                  data-ng-model="$ctrl.food.unit_type"
                  data-ng-change="$ctrl.food.dry = $ctrl.food.unit_type!='volume'">
            <option value="mass">Mass</option>
            <option value="volume">Volume</option>
            <option value="count">Count</option>
          </select>
        </td>
        <td>
          <label for="group">Food Group:</label>
          <select id="group"
                  class="form-control"
                  data-ng-model="$ctrl.food.food_group"
                  data-ng-options="c.name.trim() as c.name.trim()
                                   for c in categories">
          </select>
        </td>
      </tr>
    </table>
     <div class="panel-group" style="margin: 1em;">
       <div class="panel panel-default">
         <div class="panel-heading">
           <div class="panel-title">
             <a data-toggle="collapse" href="#detailsDiv">Details</a>
           </div>
         </div>
         <div id="detailsDiv" class="panel-collapse collapse">
           <div class="panel-body">
             <div class="form-group">
               <div class="checkbox">
                 <label for="dry">
                   <input id="dry" type="checkbox"
                          data-ng-model="$ctrl.food.dry" />
                   Dry
                 </label>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
  </div>
</div>