AngularJS in CoffeeScript

by akrubic

HTML

<script src="http://knockoutjs.com/examples/resources/sampleProductCategories.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<div class='liveExample' ng-controller="Cart">
    <table width='100%'>
        <thead>
            <tr>
                <th width='25%'>Category</th>
                <th width='25%'>Product</th>
                <th class='price' width='15%'>Price</th>
                <th class='quantity' width='10%'>Quantity</th>
                <th class='price' width='15%'>Subtotal</th>
                <th width='10%'> </th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in lines">
            <td width='25%'>
                <select ng-model="item.categoryData" ng-options="c.name for c in sampleProductCategories" ng-change="changeCategory($index)"><option value="">Select ...</option></select>
            </td>
            <td width='25%'>
                <select ng-model="item.product" ng-hide="!item.categoryData.products" ng-options="p.name for p in item.categoryData.products"  ng-change="changeProduct($index)"><option value="">Select ...</option></select>
            </td>
            <td class='price' width='15%'><label size="6"  ng-hide="!item.product">{{item.product.price | currency}}</label></td>
            <td class='quantity' width='10%'><input type="number" ng-model="item.quantity" ng-required ng-hide="!item.product"></td>
            <td class='price' width='15%'><span  ng-hide="!item.product">{{item.product.price * item.quantity | currency}}</span></td>
            <td width='10%'>
                [<a href ng-click="removeLine($index)">X</a>]
            </td>
        </tr>
        </tbody>
    </table>
    <p class='grandTotal'>
        Total value: <span>{{grandTotal() | currency}}</span>
    </p>
    <button ng-click="addLine()">Add product</button>
    <button ng-click="save()">Submit order</button>
    
    <hr/>
    <p>{{dumpMe()}}</p>
</div>

CSS

body { font-family: arial; font-size: 14px; }

.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

.liveExample th { text-align: left; font-weight: bold; }
.liveExample .price { text-align: right; padding-right: 2em; }
.liveExample .grandTotal { border-top: 1px solid silver; padding-top: 0.5em; font-size: 1.2em; }
.liveExample .grandTotal SPAN { font-weight: bold; }

.liveExample table, .liveExample td, .liveExample th { padding: 0.2em; border-width: 0; margin: 0; vertical-align: top; }
.liveExample td input, .liveExample td select { width: 8em; }
.liveExample td.quantity input { width: 4em; }
.liveExample td select { height: 1.8em; white-space: nowrap; }


li { list-style-type: disc; margin-left: 20px; }

CoffeeScript

app = angular.module 'myapp', []

Item = ->
  @category = null
  @categoryData = null
  @product = null
  @quantity = 0

Cart = ($scope) ->
  
  # Stores an array of lines, and from these, can work out the grandTotal
  self = $scope
  self.sampleProductCategories = sampleProductCategories
  self.lines = [new Item()] # Put one line in by default
  self.dumpMe = ->
    JSON.stringify($.map self.lines, (line) ->
        category: line.category
        product: line.product
        quantity: line.quantity)

  self.grandTotal = ->
    total = 0
    $.each self.lines, ->
      total += if @product then @product.price * parseInt("0" + @quantity, 10) else 0
    total

  
  # Operations
  self.addLine = ->
    self.lines.push new Item()

  self.removeLine = (line) ->
    self.lines.splice line, 1

  self.save = ->
    dataToSave = $.map(self.lines, (line) ->
      (if line.product 
        productName: line.product.name
        quantity: line.quantity
      else `undefined`)
    )
    alert "Could now send this to server: " + JSON.stringify(dataToSave)

  self.changeCategory = (line) ->
    self.lines[line].category = if self.lines[line].categoryData then self.lines[line].categoryData.name else null
    self.lines[line].product = null
    
  self.changeProduct = (line) ->
    self.lines[line].quantity = if self.lines[line].product then 1 else 0
    
app.controller "Cart", Cart
        
angular.bootstrap document, ['myapp']