jack jack - 1 month ago 12
Javascript Question

Can not re invoke an angular function based on conditions

The idea is:

Part 1:
To click the eye close button:
And turn the eye close button to eye open. And Show the password.

Part 2:
To click the eye open button:
And turn the eye open button to eye close. And hide the password.

HTML:

<input type="{{password_visible}}" class="form-control" style="height:40px;" placeholder="Password">
<a href="" ng-click="showPassword();"><span class="{{password_glyphicon}}" style="color:#7F7F7F" id="input_img"></span></a>


angular:

$scope.password_visible = "password";
$scope.password_glyphicon = "glyphicon glyphicon-eye-close";


if($scope.password_visible === "password"){

$scope.showPassword = function(){

$scope.password_visible = "text";
$scope.password_glyphicon = "glyphicon glyphicon-eye-open";

};

}else{

$scope.showPassword = function(){

$scope.password_visible = "password";
$scope.password_glyphicon = "glyphicon glyphicon-eye-close";

};

}


The problem is onceI click the button and invoke the function and accomplish part 1, I can not accomplish part 2

Please advice

Answer

Here's a working plunk. If you are manipulating css in your controller you are doing something wrong. That's completely non-angular.

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <i class='glyphicon' ng-class="{'glyphicon-eye-open':!hideText, 'glyphicon-eye-close':hideText}" ng-click='hideText=!hideText'></i>
    <input type='password' ng-show='hideText' ng-model='useSameScopeObject'/>
    <input type='text' ng-show='!hideText' ng-model ='useSameScopeObject'/>
    <pre>{{useSameScopeObject}}</pre>
  </body>

https://plnkr.co/edit/hlUCCgv9tGrSovpxL2Bq?p=preview

Comments