0

I can calculate the date for a single input, but when there is more inputs, how do I do that?
One setfield has a name, DOB and AGE, AGE has to be calculated based on the DOB selected... the thig is that the user can add more setfield with the same "inputs"

<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>

I'm using angular to repeat that block of inputs encase the user need more... but the thing is, how do I calculate the age?... if there was only 1 ID then no problem, now if I use class, and the user add 6 blocks the class would be the same, and every single input in that block (age) will get the same age even if the date is different...

thank you.

1 Answer 1

1

Solution

I made a bunch of assumptions because there wasn't enough information from you question. Please tailor this to your needs. In this example, I've created an array of objects that contains a name and a dob. Since age will be calculated, I've used the field output.

Essentially, what you need to do is create a function that calculates the age. Since you are storing dob, it's unnecessary to store age. Age should be a calculated field based off of dob. Since UTC time is from 1970, calculation of age should be (today - dob).getFullYear() - 1970. See below.

This avoids the multiple id problem that you face. With AngularJS, you should always think data first. Manipulation of the DOM should be a last resort. I suspect you were calculating the age based off of the id's.

Here is the jsFiddle.

Code

Here is my AngularJS Template:

<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>

Here is my Controller, along with the helper functions.

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);
}
Sign up to request clarification or add additional context in comments.

2 Comments

Hello, that works after I fetch the information, but the information can not be fetch until user indicate how many fields are needed, field are, name, and bod, the field age is on auto based on the field dob, so say, you start with a single row, name, dob, age, you filled John, 1987, and you get 27 for age, then you click on "Add More" and you get another row, name, dob, age.. same thing, I can do this with Java using sequential ID's based on the number of rows, then there is another problem, when I fetch the info how do make the rows based on info I get?... what a mess i have.. Thank you...
That actually makes the problem a lot easier... See this link for the solution. Please accept this answer if it helps you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.