Warum speichern meine Daten meine aktualisierten Bereichsdaten nicht aus meinem Formular?

Question

Ich habe ein Formular in einem Modal erstellt, das es jemandem erlaubt, in Plandetails einzugeben. Ich habe erstellt dann die Umfang Form in Attribute ng-Modells, wie Sie unten sehen können ...

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

In meinem Code ich dann versuche, die Daten aus dem Formular in mein Bereichsobjekt für Pläne unter Titel zu ziehen, Übersicht, Notizen und Visualplan. Dann habe ich dies codiert, um die Daten aus dem Formular in meine Firebase JSON hochzuladen. Nach dem Absenden der Details funktioniert der Upload in den json-Prozess jedoch korrekt, aber es werden die Standardwerte für Titel, Übersicht, Notizen und VisualPlan hochgeladen, die ich initial in meiner Datei dailyplans.js eingestellt habe. Was ich hochladen möchte, sind die Details, die ich über ng-model angehängt habe, anstelle der initial gesetzten Werte. Kann jemand sehen, was ich falsch mache?

Unten ist meine Js-Datei.

$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); 
     }); 
    } 
} 

Answer 1

Sie setzen das Planungsobjekt zurück, wenn der Benutzer auf Senden klickt. Idealerweise sollte es außerhalb der submit Methode sein.

Dies ist, wie Sie es

$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); 
     }); 
    } 
} 

tun sollten die HTML als

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

hoffe, das hilft und auch aktualisieren.

Answer 2

überschreiben Sie einfach nicht Ihr plans Objekt:

$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); 
     }); 
    } 
} 

Auf diese Weise Winkel kann richtig die Zuhörer feuern.