JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

大佬总结

以上是大佬教程为你收集整理的javascript – 如何使用Angular JS将一个模型绑定到多个输入全部内容,希望文章能够帮你解决javascript – 如何使用Angular JS将一个模型绑定到多个输入所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。