jack jack - 3 years ago 69
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.


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


$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";



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

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download