大佬教程收集整理的这篇文章主要介绍了javascript – 如何使用Angular JS将一个模型绑定到多个输入,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想允许用户使用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.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; }
以上是大佬教程为你收集整理的javascript – 如何使用Angular JS将一个模型绑定到多个输入全部内容,希望文章能够帮你解决javascript – 如何使用Angular JS将一个模型绑定到多个输入所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。