1

I am new to AngularJS.

Here is my HTML code:

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

And here is my script:

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

I just want to get startDate and endDate inside daterangepicker

Now, I could bind my startDate and endDate from the server and init them on the UI.

However, after I modify from the browser UI (the daterangerpicker), the date value would not get changed.

Anything wrong?

Please help!

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 に答える