javascript – 如何使用Angular JS将一个模型绑定到多个输入

我有一个用于 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

原文地址：https://www.jb51.cc/js/151050.html