设置默认时间会导致 angularjs 中的绑定问题答案

【问题标题】：Setting default time causes binding issues in angularjs设置默认时间会导致 angularjs 中的绑定问题
【发布时间】：2017-01-10 11:11:40
【问题描述】：

我的应用中有一个时间输入框

<input type="time" name="time" ng-model="time" 
min="09:00:00" max="22:00:00" ng-change="yesorno()" required />
... some other HTML data
{{time | date: "h:mm a"}}

在我的控制器中

$scope.yesorno = function() {
    $scope.time // get data and set true or false to other values
};

这一切都很好，当我更改文本框中的时间时，数据也会发生变化。

但是我需要给输入框设置一个默认值，通过搜索发现了这个方法。

$scope.time = new Date (new Date().toDateString() + ' ' + '<?php echo isset($_GET['time']) ? $_GET['time'] : '10:00'; ?>');

成功让我在输入框中有一个默认值，但是突然间，当我更改时间输入框时{{time | date: "h:mm a"}}变为空白，并且$scope.time在控制台日志中未定义。

我需要一些关于如何设置默认时间同时仍保留数据绑定的建议。

【问题讨论】：

标签： angularjs time bind default

【解决方案1】：

为什么不在控制器上做一个功能来给你时间呢？如果您的输入中没有一个“设置”，请给它一个默认时间：

function retrieveTime() {
  return $scope.time || new Date(//Your Time/Date);
}

那么你的模板就变成了：

{{ retrieveTime() | date: "h:mm a" }}

【讨论】：

【解决方案2】：

我找到了解决办法。

<input type="time" name="time" id="timei" value="<?php echo isset($_GET['time']) ? $_GET['time'] : '10:00'; ?>"
        min="09:00:00" max="22:00:00" onchange="bindTime()" required />

我没有用 angularjs 绑定我的时间输入框。相反，我将其视为普通的 HTML5 时间框，我可以在其中使用 value 属性设置默认时间。然后我使用 onchange 属性在我的控制器之外调用一个函数来与作用域交互

function bindTime () {
    var scope = angular.element(document.getElementById('appwrap')).scope();
    scope.time = new Date (new Date().toDateString() + ' ' + document.getElementById('timei').value);
    scope.$apply();
}

这也适用于移动浏览器。

【讨论】：