AngularJS - ngモデルのデータを処理する実績のある方法

Question

私はフォームを持っており、angularjs - controllerに日付をバインドしようとしていますので、それをさらに多くのことを行うためにdjangorestframeworkビューに渡すことができます。

私の問題は、コントローラーに入力されたdatetimepickerのデータを正しくバインドする方法がわからないことです。フォームとコントローラーの小さな部分が表示されます。私は入力フィールドにng-modelを持って、送信ボタンにfunctionを入れておく必要がありますが、それは私にとっては明らかですが、コントローラーの部分は分かりません。どうすればこれを正しくバインドすることができますか、ありがとう、コントローラはコーヒースクリプトで書かれています。

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

コントローラー：

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

問題は、あなたのコントローラにすべてのモデルを渡さないです。基本的にdoAction（）メソッドは何もできません！

私が提案するのは、フォームを変更してng-submitを使用し、モデルをコントローラに渡すことです。

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

私はあなたのボタンをtype = submitのフォームの中に持っています。その後、あなたのコントローラで

あなたは、このようなあなたのデータモデルにアクセスすることができます。

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