AngularJS，如何将多个输入组合成一个 ng 模型？具体来说，将日期、时间和时区输入组合到 datetime 对象中

Posted 2023-02-22

【中文标题】AngularJS，如何将多个输入组合成一个 ng 模型？具体来说，将日期、时间和时区输入组合到 datetime 对象中

【英文标题】：AngularJS, how do I combine multiple inputs into a single ng-model? Specifically, to combine a date, time, and timezone input into a datetime object

【发布时间】：2015-05-04 18:34:33

【问题描述】：

我需要创建一个日期时间对象来存储在 mysql 中，但我需要输入多个输入（一个用于日期，一个用于时间，一个用于时区）。所以现在我的代码是这样的：

<input type="datetime-local", ng-model="workshop_date">

但我想要的是更像这样的东西：

 <input type="date", ng-model="date">
 <input type="time", ng-model="time">
 <select ng-model="zone">
     <option>Pacific</option>
     <option>Eastern</option>

 <input value='date + time + zone', ng-model="workshop_date", style="display:none">

但是，这个解决方案似乎让 Angular 感到困惑。有什么方法可以让我接受多个输入并使其成为 ng-model 的值？

【参考方案1】：

类似的东西？

HTML

<input type="date" ng-model="tmp.date">
<input type="time" ng-model="tmp.time">
<select ng-model="tmp.timezone">...</select>

<strong> workshop_date </strong>

Javascript

// into controller
$scope.tmp = 
    date: '',
    time: '',
    timezone: ''
;

$scope.workshop_date = '';

$scope.$watch('[tmp.date, tmp.time, tmp.timezone]', function (tmp) 
    // you may need to add some logic here...
    $scope.workshop_date = date + time + zone;
);

【参考方案2】：

方法是使用 3 个不同的值并为 Workshop_date 创建一个 getter，以便在请求时获得 3 个的串联，如果使用 angular 1.3，您还可以使用 ng-model-options。

<input type="date", ng-model="date">
<input type="time", ng-model="time">
<select ng-model="zone">
     <option>Pacific</option>
     <option>Eastern</option>
</select>

如果你需要一个字段显示它（甚至编辑它）

<input ng-model="myObj.getWorkShopDate" ng-model-options="getterSetter: true">

在您的控制器中，您可以定义一个 getter/setter（或只是 getter）

$scope.myObj = 
    getWorkShopDate: function(value)
       if(value)
         // split into date,time,zone
       else
          return $scope.date + $scope.time + $scope.zone;
    

这里是official documentation plnkr DEMO