AngularJS - 经验证的处理 ng-model 数据的方法答案

【问题标题】：AngularJS - Proven way of handling ng-model dataAngularJS - 经验证的处理 ng-model 数据的方法
【发布时间】：2017-09-16 15:51:42
【问题描述】：

我有一个表单，我正在尝试在 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
]

【问题讨论】：

标签： javascript angularjs coffeescript

【解决方案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
  }

【讨论】：