AngularJS - Bewährte Methode zur Handhabung von ng-Modelldaten

Question

Ich habe ein Formular, und ich versuche, Datum in der angularjs - controller davon zu binden, damit ich es in die djangorestframework Ansicht übergeben kann, um mehr Sachen damit zu tun.

Jetzt ist mein Problem, dass ich nicht verstehe, wie Daten aus dem datetimepicker Eingabefeld richtig in den Controller zu binden, werde ich meine Form und kleinen Teil des Controllers zeigen, soweit ich das verstehe, ist das Ich muss ng-model auf dem Eingabefeld haben und einen function auf den Submit-Button setzen, und das ist klar für mich, aber der Teil in der Steuerung verstehe ich nicht, also wie kann ich das richtig binden, kann mir bitte jemand helfen, Danke, Controller ist in Kaffee-Skript geschrieben.

<div class="flex-grid" 
     ng-controller="FilterContactsListCtrl"> 
     <div class="row"> 
      <div class="cell size-p20 padding10"> 
       <form action="." method="post">{% csrf_token %} 
        <label for="id_select_date">Select Date: *</label> 
        <div class="full-size"> 
         <div class="input-control full-size text" 
          data-role="datepicker" date-format="mmmm d, yyyy"> 
          <input id="id_select_date" ng-model="selectDate"/> 
          <button class="button"><span class="mif-calendar"></span></button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="cell size-p20 padding10"> 
       <button class="button primary" ng-click="doAction()"> 
        {% trans "Submit" %} 
       </button> 
      </div> 
     </div> 
    </div> 

Controller:

app = angular.module 'vinclucms.sales' 

app.controller 'FilterContactsListCtrl', ['$scope', '$rootScope', 'LeadContact' 
    ($scope, $rootScope, LeadContact) -> 
    $scope.doAction =()-> 
     filterLeadContactList() 

    filterLeadContactList =() -> 
     $scope.selectDate = null 
     $scope.doAction =() -> 
     # Do Action with date form the input field so I can pass it to the restapi view 
     # this part I don't understand, how to bind this properly 
] 

Answer 1

das Problem ist, Sie kein Modell Ihres Controller übergeben. Grundsätzlich kann Ihre doAction() Methode nichts tun!

Was ich vorschlage, ist, Ihr Formular zu ändern, um ng-submit zu verwenden und Ihr Modell an den Controller zu übergeben.

<form ng-submit="doAction(selectDate)" action="." method="post">{% csrf_token %} 
       <label for="id_select_date">Select Date: *</label> 
       <div class="full-size"> 
        <div class="input-control full-size text" 
         data-role="datepicker" date-format="mmmm d, yyyy"> 
         <input id="id_select_date" ng-model="selectDate"/> 
         <button class="button"><span class="mif-calendar"></span></button> 
        </div> 
       </div> 
      <button class="button primary" type="submit"> 
       {% trans "Submit" %} 
      </button> 
</form> 

Wie Sie bemerken, bringe ich Ihren Knopf innerhalb des Formulars mit type = submit.

Später in Ihrem Controller können Sie Ihr Datenmodell wie folgt zugreifen:

$scope.doAction = function(selectDate){ 
     console.log(selectDate); // You have access to your data now 
    //Do what ever you want 
    }