Question

我的angularjs应用程序的表单有一个下拉列表和一个datetimepicker。

当我更改下拉列表时，我想更新datepicker中显示的日期。

当我更改下拉列表中的所选项目时，我收到以下错误

TypeError: Cannot read property 'apply' of undefined
at HTMLInputElement.<anonymous> (bootstrap-datetimepicker.min.js:2)
at Function.each (jquery-3.1.1.min.js:2)
at r.fn.init.each (jquery-3.1.1.min.js:2)
at r.fn.init.a.fn.datetimepicker (bootstrap-datetimepicker.min.js:2)
at m.$scope.SymbolChanged (moduleConfigformController.js:29)
at fn (eval at compile (angular.js:15197), <anonymous>:4:159)
at m.$eval (angular.js:18017)
at angular.js:25775
at Object.<anonymous> (angular.js:28600)
at q (angular.js:357)

这是令人讨厌的代码行：

$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

这是我的控制器：

mainApp2.controller("moduleConfigformController",
function moduleConfigformController($scope, moduleConfigformService, $uibModalInstance) {
$scope.close = function (e) {
    $uibModalInstance.dismiss();
    e.stopPropagation();
};

$scope.formDebug = "loaded";

var settingsPromise = moduleConfigformService.simulationsettings();

settingsPromise.then(function (settings) {
    $scope.simulationsettings = settings;
    $scope.symbols = $scope.simulationsettings.symbols;
    $scope.intervals = $scope.simulationsettings.intervals;
}).catch(function (error) {
    throw error;
});

$scope.SymbolChanged = function () {
    console.log("Symbol ddl changed");
    console.log("New value is " + $scope.simulationsettings.Symbol);

    // hardcoded date
    // TODO: Find StartDate and EndDate where Symbol = $scope.simulationsettings.Symbol
    $scope.simulationsettings.StartDate = "24/12/2014 8:26 PM";

    // Display the new date in the datetimepicker
    // This line produced the TypeError
    $("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

    console.log("startdate is " + $scope.simulationsettings.StartDate);
    console.log("startdate is " + $scope.simulationsettings.EndDate);
}

$scope.submitConfigForm = function () {
    console.log("configform submitted");

    var startDate = $scope.simulationsettings.StartDate;
    var endDate = $scope.simulationsettings.EndDate;
    var symbol = $scope.simulationsettings.Symbol;
    var interval = $scope.simulationsettings.Intervals;

    $scope.formDebug = "StartDate: " + startDate + " EndDate: " + endDate + " Symbol: " + symbol + " Interval: " + interval;
}
});

这是我的表格：

<form name="configForm" ng-submit="submitConfigForm()">
<div class="modal-header" style="text-align:center">
    <h3 class="modal-title">Configure</h3>
    <div style="margin-top:10px">
        <button tabindex="100" class="btn btn-success pull-left" type="submit" ng-class="{'btn-primary':configForm.$valid}">Start analysis</button>
        <button class="btn btn-warning pull-right" ng-click="close($event)">Close</button>
    </div>
</div>
<div class="modal-body">
    <div class="col-sm-6" style="width: 100%;">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-3">Symbol</label>
                <div class="col-sm-9">
                    <select ng-model="simulationsettings.Symbol" ng-change="SymbolChanged()" name="fmSymbols" id="fmSymbols">
                        <option ng-repeat="item in symbols" value="{{item.Symbol}}">{{item.Symbol}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">start date</label>
                <div class="col-sm-9">
                    <input type="text" id="fmStartDate" class="form-control input-sm"
                           datetimepicker
                           ng-model="simulationsettings.StartDate"
                           placeholder="..."
                           name="fmStartDate">
                </div>
            </div>
         </div>
        form debug: '{{formDebug}}'
    </div>
</div>

datetimepicker指令

"use strict";
angular.module("datetimepicker", [])
.provider("datetimepicker", function () {
var defaultOptions = {};

this.setOptions = function (options) {
  defaultOptions = options;
};

this.$get = function () {
  return {
    getOptions: function () {
      return defaultOptions;
    }
  };
};
})

.directive("datetimepicker", [
"$timeout",
"datetimepicker",
function ($timeout,datetimepicker) {

  var defaultOptions = datetimepicker.getOptions();

  return {
    require : "?ngModel",
    restrict: "AE",
    scope   : {
      datetimepickerOptions: "@"
    },
    link : function ($scope, $element, $attrs, ngModelCtrl) {
      var passedInOptions = $scope.$eval($attrs.datetimepickerOptions);
      var options = jQuery.extend({}, defaultOptions, passedInOptions);

      $element
        .on("dp.change", function (e) {
          if (ngModelCtrl) {
            $timeout(function () {
                ngModelCtrl.$setViewValue(e.target.value);
            });
          }
        })
        .datetimepicker(options);

      function setPickerValue() {
        var date = options.defaultDate || null;

        if (ngModelCtrl && ngModelCtrl.$viewValue) {
          date = ngModelCtrl.$viewValue;
        }

        $element
          .data("DateTimePicker")
          .date(date);
      }

      if (ngModelCtrl) {
        ngModelCtrl.$render = function () {
          setPickerValue();
        };
      }

      setPickerValue();
    }
  };
}
]);

知道如何更新datetimepicker以显示更新后的值吗？

Answer 1

您正在尝试将日期对象放在文本字段中，如果您没有使用日期选择器，这可能会有效 1 /更改输入类型以键入日期或更改此$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate)); 如果你的日期选择器接受这种格式“24/12/2014 8:26 PM”，它可能会有用$("#fmStartDate").datetimepicker("setDate", $scope.simulationsettings.StartDate);

2 /您可能需要检查日期选择器文档以了解可接受的格式类型

Answer 2

您正在此处更新模型：

 $scope.simulationsettings.StartDate = "24/12/2014 8:26 PM";

然后你尝试在这里设置datepickers值：

$("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

但是，datepicker有$scope.simulationsettings.StartDate作为模型。这就是你得到错误的原因。 Angular试图两次调用摘要周期。

您的功能应如下所示：

$scope.SymbolChanged = function () {
    console.log("Symbol ddl changed");
    console.log("New value is " + $scope.simulationsettings.Symbol);

    // hardcoded date
    // TODO: Find StartDate and EndDate where Symbol = $scope.simulationsettings.Symbol
    // the binding should be of the same type as your input, it means that the value returned from the datepicker must be a Date
    $scope.simulationsettings.StartDate =  new Date("24/12/2014 8:26 PM");

    // This line is useless, the datepicked model is binded to $scope.simulationsettings.StartDate
    // $("#fmStartDate").datetimepicker("setDate", new Date($scope.simulationsettings.StartDate));

    console.log("startdate is " + $scope.simulationsettings.StartDate);
    console.log("startdate is " + $scope.simulationsettings.EndDate);
}

但是由于您使用的是input type="text"，我们需要有关您正在使用的datetimepicker指令的更多信息。

Angularjs。 TypeError：无法读取属性＆＃39; apply＆＃39;未定义的

2 个答案: