0

我是 Angular（和 javascript）的新手，所以这可能是一个非常简单的原因，它不起作用。我有一个日期选择器，它给我一个日期，我根据该日期生成一些要显示的内容。因此，如果日期选择器中的日期发生变化，我需要重新生成内容。我能做的（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
    };
});

编辑：这是生成日期选择器的内容：

<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

0

您需要在 daypicker 包装器中放置某种 ng-model 以将值传递回范围。尝试添加 ng-model="ds_date"

于 2015-01-09T17:22:07.207 回答