1

フォーム内で動的に計算するためにいくつかのAngularJSを適用しているRails3.2.8アプリがあります。

投資家を複数の家にマッピングする基本的なテストアプリケーションがあり、各家には、最終的に合計したいコストと値があります。

これが私のフォームです

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

新しいフォームをロードすると、次のようにコントローラーに3つの家が建てられます。

  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」フィールドが空白に設定されます。

正しくバインドしていますか？RailsテンプレートでAngularJSを使用してネストされたフォームをバインドする簡単な方法はありますか？

現時点では、AngularJSを使用して、住宅の合計の「コスト」値を「total_cost」フィールドに取得しようとしています。

4

2 に答える 2

2

'batarang'https://github.com/angular/angularjs-batarangと呼ばれる優れたデバッグツールを使用して問題を見つけることができまし た

文字列をparseIntする必要がありました：

    total = parseInt(total) + parseInt(ts.cost)
于 2012-10-23T00:09:44.667 に答える
1

以下（簡略化されたコード）は私がすることです：

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-repeat3つのフォームを配置するために使用します。そうすれば、コードはもっときれいになると思います。

于 2012-10-22T08:00:57.117 に答える