javascript - 如何使用 Angular JS 将一个模型绑定(bind)到多个输入

Question

我有一个用于 MySQL 日期字段的表单输入。例如:2015-01-31。

我想让用户使用 3 种不同的表单输入来输入。一年一个，一个月一个，一天一个。

显然 ng-model 不会开箱即用，因为我试图将日期字符串的一个部分绑定(bind)到每个输入。我很确定这样做的方法是再见创建三个“临时”范围变量/模型

$scope.year;
$scope.month;
$scope.day;

...然后以某种方式将它们组合/绑定(bind)到实际值。

//If only it were this easy!
$scope.date = $scope.year + "-" + $scope.month + "-" + $scope.day;

上面的行当然不会起作用，因为值不是双向绑定(bind)的。如果表单仅用于保存新数据，我可以通过在提交时组合输入来摆脱它。但我也需要它来处理/显示现有数据。如果我想不出一种方法来控制 Angular 的绑定(bind)魔法来做我想做的事情，它将变得非常丑陋。

我找到了 this question我认为这是在尝试做同样的事情，但他们使用自定义指令解决了它，这是我希望避免的事情。我知道这可能是一种更易于维护/便携/模块化的方式，但我是 Angular 的新手，对此有点害怕。此外，输入使用可爱的 angular-selectize指令，这为该方法增加了一层额外的复杂性。

Answer 1

指令可能是最好的，但这些示例看起来过于复杂。无论如何，如果您希望避免指令，只需使用 $scope.$watch 并在每次重要变量之一更新时重新构建您的日期字符串。

类似这样的东西可能在你的 Controller 中:

$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;
}

作为旁注，这可能也是我的指令逻辑的样子。

编辑:代码清理和 fiddle

更清晰的示例 - 我更喜欢这个，因为它将所有与日期相关的项目分组到一个对象中，这也使得观察变化更容易。

$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