Concatenating three input fields into one model in angular

Question

<input type="text" ng-model="expiry.year" />
<input type="text" ng-model="expiry.month" />
<input type="text" ng-model="expiry.date" />

{
expiration: expiry.year + expiry.month, expiry.date
}

How to concatenate this into one model?I have this inout fields exist in a multiple form.

Plese setup a plunker. You could use ng-change to update expiration when expiry is changed or do a watch. — apairet
– apairet, Commented Aug 25, 2014 at 5:30

harishr · Accepted Answer · 2014-08-25 06:04:56Z

1

not a complete solution but you can work along these lines

<input type="text" ng-model="expiry.year" ng-change="expiration = expiry.year + expiry.month, expiry.date" />
<input type="text" ng-model="expiry.month" ng-change="expiration = expiry.year + expiry.month, expiry.date"  />
<input type="text" ng-model="expiry.date" ng-change="expiration = expiry.year + expiry.month, expiry.date"  />

it does not handle undefined etc case. better would be to write a function and do the concatenation in controller...

<input type="text" ng-model="expiry.year" ng-change="expirationUpdated()" />
<input type="text" ng-model="expiry.month" ng-change="expirationUpdated()" />
<input type="text" ng-model="expiry.date" ng-change="expirationUpdated()" />

do it in function

var expirationUpdated = function() { ///concate logic here}

answered Aug 25, 2014 at 6:04

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

spicykimchi Over a year ago

Good idea on this part "ng-change" and call the function.I'll let the server handle my problem so that on edit/update no concatenation thing.makes code cleaner.@HarishR

Raghavendra · Accepted Answer · 2014-08-25 06:48:44Z

1

<input type="text" ng-model="expiry.year" />
<input type="text" ng-model="expiry.month" />
<input type="text" ng-model="expiry.date" />

{{ expiration }}

You can setup a watch in your controller

$scope.$watch('expiry', function(newVal) {
    $scope.expiration = newVal.year + '-' + newVal.month + '-' + newVal.date
}, true);

answered Aug 25, 2014 at 6:48

Raghavendra

5,4074 gold badges39 silver badges53 bronze badges

Collectives™ on Stack Overflow

Concatenating three input fields into one model in angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related