Change style in ng-click and after a while return to normal with AngularJS

Question

Change style in ng-click and after a while return to normal with AngularJS

Navigation

#1 by (2 votes)

2

I have the following problem: I need a field to be shown in a solution with a "mask" as if it were hidden. When an event occurs or a click on a button (or on itself) such field is filled with a value and after a time it is shown again with its "mask". So:

No HTML

<div ng-click="mudaCampo()">
    {{campo}}
</div>

No JS

$scope.campo = '*****';

$scope.valorCampo = 'ola mundo';

$scope.mudaCampo = function(){

    //mostro o valor real do campo, existente em outra variável
    $scope.campo = $scope.valorCampo;

    //volta o valor mostrado no html para a "mascara" anterior
    setTimeout(function(){
        $scope.campo = '*****'; 
    },2000);

};

My problem is that $scope.campo even changes to the value of $scope.valorCampo but the setTimeout function does not return the same value for the previous mask ... help?

Note I even tried to see how $timeout works, but when I try to use it, Angular has an error about the event ...

javascript angularjs

asked by anonymous 28.07.2015 / 16:26

1 answer

Insufficient Permission with Google calendar api v3 using python C # and MySQL with AspNetUsers, tables deleted

score 2 · Answer 1

As reported by @Omni, I went after $timeout and realized that I was using it incorrectly. To be honest I did not know the $scope.$apply that applies the existing changes in my controller ... basically it looks like this:

No JS

$scope.campo = '*****';

$scope.valorCampo = 'ola mundo';

$scope.mudaCampo = function(){

    //mostro o valor real do campo, existente em outra variável
    $scope.campo = $scope.valorCampo;

    //volta o valor mostrado no html para a "mascara" anterior
    $timeout(function(){
        $scope.campo = '*****';
    },1000);

};

Remember that it is necessary to declare $timeout as a dependency on my controller otherwise it does not work.