Angular Invoice Example

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

HTML

<h1>

Invoice Details</h1>
<script type="text/javascript" 
        src="http://code.angularjs.org/1.0.0rc1/angular-1.0.0rc1.js"></script>
        OrderId<input text=""><br><br>
         OrderDetails<input text=""><br><br>
         InvoiceDate<input text=""><br><br>
         MerchantId<input text=""><br><br>
         Shipping Address<input text=""><br><br>

<table ng:app="jqanim" ng:controller="MyCtlr" ng:init="invoice={items:[{qty:10, description:'gadget', cost:9.95}]}">
    <tr>
        <th>ProductId</th>
        <th>ProductName</th>
        <th>Quantity</th>
        <th>Total</th>
        <th>Discount</th><th>GrandTotal</th>
    </tr>
    <tr ng:repeat="item in invoice.items" style="display: none" jq:animate="dropdown;250">
        <td><input ng:model="item.qty" value="1" size="4" ng:required ng:validate="integer"></td>
        <td><input ng:model="item.description"></td>
        <td><input ng:model="item.cost" value="0.00" ng:required ng:validate="number" size="6"></td>
        <td>{{item.cost * item.qty | currency}}</td>
        <td><input ng:model="item.discount"></td>
        <td><input ng:model="item.grandtotal"></td>
        <td>[<a href ng:click="removeItem(item)">X</a>]</td>
    </tr>
    <tr>
        <td><a href ng:click="addItem()">add item</a></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table

JavaScript

function MyCtlr($scope) {
    $scope.addItem = function() {
        $scope.invoice.items.unshift({qty:0, cost:0, description:""});    
    }
    $scope.removeItem = function(item) {
        $scope.invoice.items.splice($scope.invoice.items.indexOf(item), 1);    
    }
};
    
angular.module('jqanim', []).directive('jqAnimate', function(){ 
  // 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(scope, 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 
      setTimeout(function() {instanceElement.show('slow');}, 0); 
    // 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 
  } 
});