0

私は Angular (および JavaScript) を初めて使用するので、おそらくこれが機能しないという単純な理由があります。表示するコンテンツを生成するための日付を提供する日付ピッカーがあります。そのため、datepicker の日付が変更された場合は、コンテンツを再生成する必要があります。私ができること(ng-change実行中)---問題は、日付が実際に変更されていないため、同じコンテンツを取得していることです。コンテンツの生成に使用された日付を表示するアラートで確認できます。日付はもともとデフォルト(昨日の日付)に設定されているため、最初にコンテンツが生成されたときは正常に機能しますが、日付ピッカーで日付を変更しようとすると変更されません。

HTML コード:

<p class="col-xs-2 col-md-2 col-md-offset-5 text-center input-group">
    <span class="form-control input-sm" style="cursor:pointer" ng-click="openDatePicker($event, 'openedDaily')"> 
        {{ds_date | date:'MM/dd/yyyy'}}
    </span>
    <input type="hidden" class="form-control input-sm"
        ng-model="ds_date" ng-change="regenerate();"
        ng-required="true"
        format-day-title="MM/dd/yyyy"
        datepicker-popup="MM/dd/yyyy"
        show-button-bar="false"
        is-open="openedDaily"
        min-date="onemonthago"
        max-date="yesterday"
        close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-sm btn-default" ng-click="openDatePicker($event, 'openedDaily')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p> 

コントローラ:

angular.module('twApp')
.controller('ReportsCtrl', function ($scope, $modal, $filter, LoginData, $timeout, $http) {
    $scope.yesterday = new Date();
    $scope.yesterday.setDate($scope.yesterday.getDate() - 1);
    $scope.reportOutput = null;
    $scope.ds_date= $scope.yesterday;


    $scope.openDatePicker = function($event, name) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope[name] = true;
  alert($scope.ds_date);
    };


    function dateString(input) {
        return $filter('date')(input, 'yyyy-MM-dd');
    }

    $scope.goBack = function(){
  $scope.reportOutput = null;
    };

    $scope.regenerate = function(){
  $scope.generate($scope.which);
    };

    $scope.generate = function(id) {
        var promise = requestReport(id);
        if (promise !== null) {
    alert('generated!!   '+$scope.ds_date);
            $scope.loading = true;
            promise.then(
                function() {
                    $scope.loading = false;
                }, function() {
                    alert('There was a problem generating the report.  Please try again.');
                    $scope.loading = false;
                }
            );
        }
    };

    var requestReport = function(id) {
         //do stuff
    };
});

編集:これがdatepickerを生成するものです:

<script id="template/datepicker/datepicker.html" type="text/ng-template">
        <div role="application" ng-keydown="keydown($event)">
          <daypicker tabindex="0"></daypicker>
        </div>
    </script>
    <script id="template/datepicker/popup.html" type="text/ng-template">
        <ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)">
            <li ng-transclude></li>
            <li ng-if="showButtonBar" style="padding:10px 9px 2px">
                <span class="btn-group">
                    <button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button>
                    <button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button>
                </span>
                <button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
            </li>
        </ul>
    </script>
    <script id="template/datepicker/day.html" type="text/ng-template">
        <table class="datepickertable">
          <thead>
            <tr>
              <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
              <th colspan="{{5}}" class="text-center"><strong>{{title}}</strong></th>
              <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
            </tr>
            <tr>
              <th ng-repeat="label in labels track by $index" class="text-center"><small aria-label="{{label.full}}">{{label.abbr}}</small></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in rows track by $index">
              <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
                <button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current}">{{dt.label}}</span></button>
              </td>
            </tr>
          </tbody>
        </table>
    </script>
4

1 に答える 1