Lo que quieres hacer se puede hacer con un $watch
.
La ventaja inmediata es que si cambias el valor de $scope.datosNuevoCarnet.NuevoCarnet.Emision
mediante javascript $scope.datosNuevoCarnet.NuevoCarnet.Vencimiento
también se actualiza.
Si usas ng-change
este no ejecutará el código si ocurre lo siguiente
- Si el valor retornado por las transformaciones de los
$parsers
no ha cambiado
- Si el input continúa siendo inválido
- Si el modelo ha sido cambiado mediante código y no por un cambio al input
Por eso te recomiendo que sólo uses ng-change
si y sólo si se cumplen las dos condiciones
- Nunca modificas esos valores por código
- Tienes puesta alguna validación algo compleja en tu
ng-model
(ej. ng-pattern
) y solo quieres ejecutar el cambio cuando el valor es válido.
Este plunker demuestra el problema http://plnkr.co/edit/ZRU0H5?p=preview
Este código es más que suficiente
$scope.$watch('datosNuevoCarnet.NuevoCarnet.Emision', function(val) {
if (val) {
var nuevoCarnet = $scope.datosNuevoCarnet.NuevoCarnet;
var emision = new Date(nuevoCarnet.Emision);
nuevoCarnet.Vencimiento = new Date(val);
nuevoCarnet.Vencimiento.setYear(emision.getFullYear() + 1);
}
});
angular.module('app', [])
.controller('ChangeCtrl', function($scope) {
$scope.datosNuevoCarnet = {
NuevoCarnet: {
Emision: null,
Vencimiento: null
}
};
$scope.$watch('datosNuevoCarnet.NuevoCarnet.Emision', function(val) {
if (val) {
var nuevoCarnet = $scope.datosNuevoCarnet.NuevoCarnet;
var emision = new Date(nuevoCarnet.Emision);
nuevoCarnet.Vencimiento = new Date(val);
nuevoCarnet.Vencimiento.setYear(emision.getFullYear() + 1);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ChangeCtrl">
<input type="text" ng-model="datosNuevoCarnet.NuevoCarnet.Emision">
<h2>Valor introducido</h2>
{{datosNuevoCarnet.NuevoCarnet.Emision}}
<h2>Fecha vencimiento</h2>
{{datosNuevoCarnet.NuevoCarnet.Vencimiento}}
</div>
Aún mas simple si no pretendes usar el valor Vencimiento
en código y nada más usarlo de manera informativa puedes usar un filtro
para formatear la salida
angular.module('app', [])
.controller('ChangeCtrl', function($scope) {
$scope.datosNuevoCarnet = {
NuevoCarnet: {
Emision: null
}
};
})
.filter('vencimiento', function() {
return function(input) {
if (input) {
var date = new Date(input);
date.setFullYear(date.getFullYear() + 1);
return date.toString();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ChangeCtrl">
<input type="text" ng-model="datosNuevoCarnet.NuevoCarnet.Emision">
<h2>Valor introducido</h2>
{{datosNuevoCarnet.NuevoCarnet.Emision}}
<h2>Fecha vencimiento</h2>
{{datosNuevoCarnet.NuevoCarnet.Emision | vencimiento}}
</div>