Angular Invoice Example

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

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"  jq:animate="dropdown;250">
        <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

JavaScript

angular.directive('jq:animate', function(jQueryExpression, templateElement){ 
  // I get run once on compile (when ng:repeat turns me into a template) 
  // parse the jQeuryExperssio -> "dropdown;250" and extract animation information. 
  return function(instanceElement){ 
    // I get run on each instance, (when ng:repeat needs a new <li> to insert into the DOM) 
    // instanceElement is already jQuery selector 
    // use the animation instructions extracted above to animate 
    instanceElement.show('slow'); 
    // not sure in instanceElement is part of the dom at this point, so you 
    //may have to do setTimeout(0) and delay the execution of the animation 
  } 
});