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 ...
Get AngularJS Web Application Development Blueprints now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.