javascript - 无法获取日期范围选择器内的值

Question

我是 AngularJS 新手。

这是我的 HTML 代码:

<div class="form-group">
                  <div class="col-xs-3 control-label">
                    <b>Campaign Period:</b>
                  </div>
                  <div class="col-xs-9 form-control-static">


                  <div ng-show="!dateForm.$visible">
                    <a class="editable-click" ng-click="dateForm.$show()" popover="Click here to Edit." popover-trigger="mouseenter">{{campaignResult.startDate || 'empty' }} - {{campaignResult.endDate || 'Never Expired' }}</a>
                  </div>

                  <form editable-form name="dateForm" onbeforesave="checkDate(daterangepicker.startDate,daterangepicker.endDate,$data)" onaftersave="updateDate($data)">
                    <div ng-show="dateForm.$visible">
                      <div class="col-md-12">
                        <label class="i-checks i-checks-sm">
                          <input type="checkbox" ng-model="campaignPeriodSetEndDate"><i></i>
                          Set End Date
                        </label>
                      </div>
                      <div class="col-md-9">
                        <div ng-if="campaignPeriodSetEndDate">
                          <input class="form-control" ui-jq="daterangepicker" ui-options="{
                            format: 'YYYY-MM-DD',
                            startDate: campaignResult.startDate,
                            endDate: campaignResult.endDate
                          }" ng-model="dateRange" />
                        </div>
                        <div ng-if="!campaignPeriodSetEndDate">
                          <input class="form-control" ui-jq="daterangepicker" ui-options="{
                            singleDatePicker : true,
                            format: 'YYYY-MM-DD',
                            endDate: campaignResult.startDate
                          }" ng-model="dateRange" />
                        </div>
                        <ng-date-range bind="modalDates" min="minRangeDate" max="maxRangeDate" limit="limitRangeDate" class="reportrange"></ng-date-range>
                      </div>

                      <div  class="m-l">
                        <button type="submit" class="btn btn-primary btn-sm " ng-click="checkDate(daterangepicker.startDate,daterangepicker.endDate,$data)">
                          <span class="glyphicon glyphicon-ok">
                          </span>
                        </button>
                        <button type="button" class="btn btn-default btn-sm" ng-click="dateForm.$cancel()" tabindex="0">
                          <span class="glyphicon glyphicon-remove">
                          </span>
                        </button>
                      </div>
                    </div>
                  </form>

                  </div>
                </div>

这是我的脚本:

$scope.checkDate = (startDate,endDate,data)=>
      {
        console.log(startDate);
        console.log(endDate);
        console.log(data);
}

我只想在daterangepicker中获取startDate和endDate

现在，我可以从服务器绑定(bind)我的 startDate 和 endDate 并在 UI 上初始化它们。

但是，当我从浏览器 UI(daterangerpicker)修改后，日期值不会更改。

有什么问题吗？

请帮忙!

Answer 1

出现问题的原因是 ng-if，该指令创建内部范围，当您更改日期选择器中的值时，它实际上在子范围(或多个范围)中更改 - 如果您有该指令创建了多个 ng-if)。如果可能，请使用 ng-show ，否则应从 $parent 访问模型:

<input class="form-control" ui-jq="daterangepicker" ng-model="$parent.dateRange" />