1

我是 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);
}

我只想startDate进去endDatedaterangepicker

现在，我可以从服务器绑定我的startDateandendDate并在 UI 上初始化它们。

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

哪里不对了？

请帮忙！

4

1 回答 1

0

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

<input class="form-control" ui-jq="daterangepicker" ng-model="$parent.dateRange" />
于 2015-10-06T07:25:40.693 回答