Question

I have a Rails 3.2.8 app in which I’m applying some AngularJS for calculations dynamically within a form.

I have a basic test application which maps an investor to multiple houses and each house has a cost and a value in which I would like to total at the end.

Here is my form

<div ng-controller="InvestorCtrl">
  <%= form_for(@investor) do |f| %>
  <% if @investor.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@investor.errors.count, "error") %> prohibited this investor from being saved:</h2>

    <ul>
      <% @investor.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
      <% end %>
    </ul>
  </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>

  <% i = 0 %>
  <%= f.fields_for :houses do |builder| %>
  <%= builder.label :address %>
  <%= builder.text_field :address %>

  <%= builder.label :suburb %>
  <%= builder.text_field :suburb %>

  <%= builder.label :cost %>
  <%= builder.text_field :cost, "ng-model" => "timesheets[#{i}].cost", "ng-change" => "calc_cost()" %>

  <%= builder.label :value %>
  <%= builder.text_field :value, "ng-model" => "timesheets[#{i}].value" %>

  <% i = i + 1 %>

  <% end %>

  <div class="field">
    <%= f.label :total_cost %>
    <%= f.number_field :total_cost, "ng-model" => "total_cost" %>
  </div>
  <div class="field">
    <%= f.label :total_value %>
    <%= f.number_field :total_value, "ng-model" => "total_value" %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
  <% end %>
</div>

Here is the angularjs coffeescript I’m using

$ (event) ->
  app = angular.module "investor", []

  app.controller("InvestorCtrl", ["$scope", ($scope) ->
    $scope.timesheets = [
      { cost: 295000, value: 450000 },
      { cost: 600000, value: 620000  },
      { cost: 1000000, value: 900000 },    
    ]
    $scope.calc_cost = ->
      total = 0
      for ts in $scope.timesheets
        total = total + ts.cost
      $scope.total_cost = total

    $scope.calc_cost()
  ])

  angular.bootstrap document, ['investor']

When I load a new form I’m building three houses in the controller like so:

  def new
    @investor = Investor.new
    3.times { @investor.houses.build }

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @investor }
    end
  end

The total cost is calculated correctly when going to a new form, however when I change any of the houses ‘cost’ values the ‘total_cost’ field is set to blank.

Am I binding correctly?
Is there an easier way to bind nested forms using AngularJS with Rails templates?

At the moment I’m just trying to get a sum of houses ‘cost’ value into the ‘total_cost’ field using AngularJS.

Answer 1

I managed to find my problem using the great debugging tool called ‘batarang’
https://github.com/angular/angularjs-batarang

I just had to parseInt the strings:

    total = parseInt(total) + parseInt(ts.cost)