我有一个用于
MySQL日期字段的表单输入.例如：2015-01-31.
我想允许用户使用3种不同的表单输入输入.一年一个,一个月,一个是一天.
显然,ng-model不会开箱即用,因为我试图将日期字符串的一部分绑定到每个输入.我很确定的方法是通过创建三个“临时”范围变量/模型
$scope.year; $scope.month; $scope.day;
…然后以某种方式将它们结合/绑定到实际值.
//If only it were this easy! $scope.date = $scope.year + "-" + $scope.month + "-" + $scope.day;
上面的那一行当然不会工作,因为值不是双向的.如果表单只是为了保存新的数据,我可以通过在提交中组合输入来避免这种情况.但是我也需要它来处理/显示现有的数据.如果我无法找出一种方法来扭转Angular的绑定魔法来做我想做的事情,那将会变得丑陋.
我发现我觉得this question尝试做同样的事情,但是他们用自定义指令来解决这个问题,这是我希望避免的.我知道这可能是一个更可维护/便携/模块化的方式来做到这一点,但是我是新来的,有点恐慌.此外,输入正在使用可爱的angular-selectize指令,这为该方法增加了额外的复杂性.
解决方法
一个指令可能是最好的,但这些例子看起来过于复杂.无论如何,如果您希望避免指令,只需使用$scope.$watch,并在每次更新其中一个重要变量时重新构建日期字符串.
这样的事情可能在你的控制器中：
$scope.year = '';
$scope.month = '';
$scope.day = '';
// this might be able to be refactored
$scope.$watch('year',buildDate);
$scope.$watch('month',buildDate);
$scope.$watch('day',buildDate);
function buildDate() {
$scope.date = $scope.year + "-" + $scope.month + "-" + $scope.day;
}
作为附注,这可能是我的指令逻辑也是这样.
编辑：代码清理和小提琴
更清洁的例子 – 我喜欢这个,因为它将所有与日期相关的项目与一个对象分组,这也使得观察更改变得更容易.
$scope.date = {
year: '',month: '',day: ''
};
// use watch collection to watch properties on the main 'date' object
$scope.$watchCollection('date',buildDate);
function buildDate(date) {
$scope.dateString = date.year + "-" + date.month + "-" + date.day;
}
Fiddle