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 coffeescript

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

转到新表单时会正确计算总费用，但是当我更改任何房屋的“费用”值时，“total_cost”字段将设置为空白。

我绑定正确吗？有没有更简单的方法使用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个表格。我认为代码会更加清晰。

使用AngularJS计算嵌套表单的Rails

2 个答案: