Angular Invoice Example

The following is a demo invoicing app built only with angular's declarative templates, data-binding, filters, and validators.

by vojtajina

HTML

<script type="text/javascript" ng:autobind
        src="http://code.angularjs.org/0.9.16/angular-0.9.16.js"></script>

<table ng:init="invoice={items:[{qty:10, description:'gadget', cost:9.95}]}">
    <tr>
        <th>Qty</th>
        <th>Description</th>
        <th>Cost</th>
        <th>Total</th>
        <th></th>
    </tr>
    <tr ng:repeat="item in invoice.items">
        <td><input name="item.qty" value="1" size="4" ng:required ng:validate="integer"></td>
        <td><input name="item.description"></td>
        <td><input name="item.cost" value="0.00" ng:required ng:validate="number" size="6"></td>
        <td>{{item.qty * item.cost | currency}}</td>
        <td>[<a href ng:click="invoice.items.$remove(item)">X</a>]</td>
    </tr>
    <tr>
        <td><a href ng:click="invoice.items.$add()">add item</a></td>
        <td></td>
        <td>Total:</td>
        <td>{{invoice.items.$sum('qty*cost') | currency}}</td>
    </tr>
</table>

CSS

table