使用 datepicker 计算多个输入的年龄

Question

我可以计算单个输入的日期，但是当有更多输入时，我该怎么做？
一个 setfield 有一个名称、DOB 和 AGE，AGE 必须根据所选的 DOB 计算...问题是用户可以添加更多具有相同“输入”的 setfield

<form>
<div ng-controller="datas">
 <div ng-repeat="data">
  <input name="text" name="names[{{$index}}][name]">
  <input class="form-control" 
       name="dobs[{{$index}}][dob]"
       type="text"
       id="dobs[{{$index}}][dob]">
  <input name="ages[{{$index}}][age] type="text">
 </div>
</div>
</form>

我正在使用角度来重复输入块，以包含用户需要更多...但问题是，我如何计算年龄？...如果只有 1 个 ID，那么没问题，现在如果我使用类，并且用户添加 6 个块类将是相同的，并且该块（年龄）中的每个单个输入将获得相同的年龄，即使日期不同......

谢谢。

Answer 1

解决方案

我做了一堆假设，因为你的问题没有足够的信息。请根据您的需要进行调整。在此示例中，我创建了一个包含名称和 dob 的对象数组。由于将计算age，因此我使用了html5 字段output。

本质上，您需要做的是创建一个计算年龄的函数。由于您正在存储dob，因此没有必要存储age。年龄应该是基于dob 的计算字段。由于 UTC 时间是从 1970 年开始，年龄的计算应该是(today - dob).getFullYear() - 1970。见下文。

这避免了您面临的多个id 问题。使用 AngularJS，您应该始终首先考虑数据。操作 DOM 应该是最后的手段。我怀疑你是根据id 计算年龄。

这里是jsFiddle。

代码

这是我的 AngularJS 模板：

<div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="person in data">
        <input type="text" ng-model="person.name" />
        <input type="date" ng-model="person.dob" />
        <input type="output" value="{{ getAge(person.dob) }}" />
    </div>
</div>

这是我的控制器以及辅助函数。

var app = angular.module('app', []);

var ctrl = function($scope) {
    /* Replace data with your resource/service call */
    $scope.data = [
        {name: 'Fred',
         dob: randDate()},
        {name: 'Bob',
         dob: randDate()},
        {name: 'Julie',
         dob: randDate()}
        ];

    /* Calculates the age */
    $scope.getAge = function(dob) {
        var now = new Date();
        var age = dateDiff(now, new Date(dob));
        return age.getFullYear() - 1970;
    };
};

function dateDiff(date1, date2) {
    return new Date(Math.abs(date1.getTime() - date2.getTime()));
}

/* Creates a random date in ISO format */
function randDate(){
    var now = new Date();
    var date = new Date(Math.random() * 
                    Date.UTC(now.getFullYear(), 
                             now.getMonth(),
                             now.getDate()));
    return date.toISOString().substring(0, 10);
}