Building the Add Expense form
Now, let's create our Add Expense form. We will add the following code in the app/partials/add-expense.html file:
<h2>Add Expense</h2>
<form id="addForm" name="addForm" novalidate >
<label>Category</label>
<select ng-model="expense.category" ng-options="category for category in categories">
</select>
<label>Amount:</label>
<input type="number" ng-model="expense.amount"></input>
<label>Description:</label>
<input type="text" ng-model="expense.description"></input>
<button ng-click="submit()">Submit</button>
</form>This is a rather straightforward form. The novalidate tag in HTML5 is used to disable the browser's default validations.
Notice that we are also making use of the built-in directive, ng-options, to dynamically load the category list into our select box.
We'll style the form by adding the following CSS to the app/css...