Question

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

<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日志中。

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

Answer 1

为什么不在控制器上创建一个功能来给你时间？如果输入中没有“设置”，请将其恢复为默认时间：

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

然后您的模板变为：

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

Answer 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();
}

这也适用于移动浏览器。

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

2 个答案: