0

Rails で AngularJS を使用しており、AngularJS スコープに登録されていない動的にネストされたフォーム項目を作成しています。それらには「ng-dirty」クラスが割り当てられます。

私は 3 つの家を持つ投資家を持っています。私の Angular コントローラーでは、代わりに Rails を介してこれらを設定したいので、最初の 2 つだけを割り当てます。

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

  app.controller("InvestorCtrl", ["$scope", ($scope) ->
    $scope.houses = [
      { cost: "295000", value: "450000" },
      { cost: "600000", value: "620000"  }    
    ]
    $scope.calc_totals = ->
      # Initialise variables
      cost = 0
      value = 0

      # Go through each house and calculate the total cost
      for h in $scope.houses
        cost = parseInt(cost) + parseInt(h.cost)
        value = parseInt(value) + parseInt(h.value)

      # Set the total
      $scope.total_cost = cost
      $scope.total_value = value  

    # Run the calculation at the start  
    # $scope.calc_totals()
  ])

  angular.bootstrap document, ['investor']

これが私のフォームです

%div{"ng-controller" => "InvestorCtrl"}
    = form_for(@investor) do |f|
        - if @investor.errors.any?
            #error_explanation
                %h2
                    = pluralize(@investor.errors.count, "error")
                    prohibited this investor from being saved:
                %ul
                    - @investor.errors.full_messages.each do |msg|
                        %li= msg
        .field
            = f.label :name
            = f.text_field :name, "ng-model" => "name"

        - i = 0
        = f.fields_for :houses do |builder|
            .field
                = render :partial => "house", :locals => {:f => builder, :i => i}
                - i = i + 1

        .field
            = f.label :total_cost
            = f.number_field :total_cost, "ng-model" => "total_cost"
        .field
            = f.label :total_value
            = f.number_field :total_value, "ng-model" => "total_value"
        .actions
            = f.submit

1 番目または 2 番目の家の「コスト」または「値」を入力すると、total_cost が更新されますが、3 番目の家を更新すると、total_cost は更新されません。

コントローラーに割り当てずにこれらの要素をリッスンするようにangularjsに動的に指示する方法はありますか?

4

1 に答える 1

0

あなたは実際にこれについて少し間違っています、IMO。Angular は繰り返し HTML のレンダリングを処理できる (そして処理する) ため、必ずしもサーバー上で HTML レンダリングを行う必要はありません。サーバーから必要なのは JSON だけです。すぐにレンダリングしたい場合は、コントローラーを初期化するときに、初期値が適切に設定されていることを確認してください。

$http またはカスタムメイドのサービスをコントローラーに挿入し、必要なデータをサーバーから直接 JSON 形式で取得してから、スコープにプラグインします。HTML とディレクティブが適切に設定されていれば、そのままレンダリングされます。そこから、他のすべてのロジックは同じになります。

ウェブは前進しています。つまり、これまでサーバーで行っていた HTML レンダリングのすべてが、実際にはますますクライアントで行われ始めているということです。また、Web サーバーでデータを取得するために使用していたサービス レイヤーはありますか? さて、それは今あなたのウェブサーバーです。

これがあなたの問題に対する直接的な答えではないことはわかっていますが、あなたがやろうとしていることを大幅に簡素化します。そうしないと、実行するバランスをとる行為があり、かなり速く気が狂ってしまいます.

于 2012-10-23T13:42:04.227 に答える