使用 AngularJS 计算嵌套表单的 Rails

Question

我有一个 Rails 3.2.8 应用程序，我在其中应用了一些 AngularJS 以在表单中动态计算。

我有一个基本的测试应用程序，它将一个投资者映射到多栋房子，每栋房子都有一个成本和价值，我想在最后合计。

这是我的表格

<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>

这是我正在使用的 angularjs 咖啡脚本

$ (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']

当我加载一个新表单时，我正在控制器中建造三个房子，如下所示：

  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

转到新表格时，总成本计算正确，但是当我更改任何房屋的“成本”值时，“总成本”字段设置为空白。

我是否正确绑定？ 有没有更简单的方法来使用 AngularJS 和 Rails 模板绑定嵌套表单？

目前我只是尝试使用 AngularJS 将房屋“成本”值的总和放入“total_cost”字段。

Answer 1

我设法使用名为“batarang”的出色调试工具找到了我的问题 https://github.com/angular/angularjs-batarang

我只需要解析字符串：

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

Answer 2

以下（简化代码）是我要做的：

在html中：

<input ng-model="cost1"/><br>
<input ng-model="cost2"/><br>
total: {{ total_cost() }}

在控制器中：

$scope.total_cost = function() {
  return $scope.cost1 + $scope.cost2;
}

PS：我不知道应该如何平衡 RAILS 和 angularjs，但我会使用 ng-repeat 来放置 3 个表单。我认为这样的代码会更干净。