0

私は誰かが計画の詳細を入力できるモーダルでフォームを作成しました。あなたは以下を参照することができますように私はその後、私は、タイトルの下に計画のための私のスコープオブジェクトにフォームからデータを取得しようとしています... NG-model属性に私のコードで私のデータが私のフォームから更新されたスコープデータを保存しないのはなぜですか?

<form> 
    <div class="form-group"> 
     <label>{{plans.title}}</label> 
     <input type="text" name="title" ng-model="plans.title" class="form-control" placeholder="Enter Title" required /> 
    </div> 
    <div class="form-group"> 
     <label>{{plans.overview}}</label> 
     <textarea name="overview" ng-model="plans.overview" class="form-control" placeholder="Overview/Purpose" required /> 
    </div> 
    <div class="form-group"> 
     <label>{{plans.notes}}</label> 
     <textarea name="notes" ng-model="plans.notes" class="form-control" placeholder="Plan Notes" required /> 
    </div> 
    <div class="form-group"> 
     <label>{{plans.visualplan}}</label> 
     <div class="button" ngf-select ng-model="plans.visualplan" name="visualplan" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" >Upload Visual Plan</div> 
    </div> 
    <div class="form-group"> 
     <button type="submit" ng-click="submit()" Value="Post">Post</button> 
    </div> 
</form> 

をスコープのフォームを作成しています、概要、ノート、およびビジュアルプラン。それから私はフォームから私のfirebase jsonにデータをアップロードするためにこれをコーディングしました。しかし、詳細を提出すると、jsonへのアップロードプロセスは正常に動作しますが、dailyplans.jsファイルに初期設定されているtitle、overview、notes、およびvisualplanのデフォルト値がアップロードされています。私がアップロードしたいのは、初期設定値の代わりにng-modelを使って添付した詳細です。誰でも私が間違っていることを発見することはできますか?

以下は私のjsファイルです。

$scope.submit = function() { 
    $scope.plans = { 
     title: 'title', 
     overview: 'overview', 
     notes: 'notes', 
     visualplan: 'visual plan' 
    } 
    if (authData) { 
     ref.child('teaching-plans').child('teaching-plans' + authData.uid).set($scope.plans).then(function(authdata) { 
      console.log('successful'); 
     }).catch(function(error) { 
      console.log(error); 
     }); 
    } 
} 
+0

送信機能で$ scope.plans {}の値をオーバーライドするのはなぜですか? – jbrown

+0

この行は 'ref.child( 'teaching-plans')の子( 'teaching-plans' + authData.uid).set($ scope.plans)'とは何ですか? Angularがdomの変更を検出しないため、可能な限りjqueryを避けるようにしてください。 – AlainIb

答えて

1

ユーザがサブミットをクリックすると、プランオブジェクトがリセットされます。理想的にはsubmitメソッドの外にあるはずです。

これは、あなたがそれを

$scope.plans = { 
    title: 'title', 
    overview: 'overview', 
    notes: 'notes', 
    visualplan: 'visual plan' 
} 
$scope.submit = function(plans) { 

    if (authData) { 
     ref.child('teaching-plans').child('teaching-plans' + authData.uid).set(plans).then(function(authdata) { 
      console.log('successful'); 
     }).catch(function(error) { 
      console.log(error); 
     }); 
    } 
} 

を行い、また、

<div class="form-group"> 
     <button type="submit" ng-click="submit(plans)" Value="Post">Post</button> 
    </div> 

は、この情報がお役に立てば幸いとしてHTMLを更新する方法です。

+0

はい、これは完璧なおかげです。上のコメントに関しては...このコードはangularjsと組み合わせても問題ありませんか? –

0

ちょうどあなたのplansオブジェクトを上書きしない:

$scope.submit = function() { 
    $scope.plans.title = 'title'; 
    $scope.plans.overview = 'overview'; 
    $scope.plans.notes = 'notes'; 
    $scope.plans.visualplan = 'visual plan; 

    if (authData) { 
     ref.child('teaching-plans').child('teaching-plans' + authData.uid).set($scope.plans).then(function(authdata) { 
      console.log('successful'); 
     }).catch(function(error) { 
      console.log(error); 
     }); 
    } 
} 

この方法では、角度を正確にリスナーを発射することができます。

関連する問題