CODEWITHSUNDEEP
javascriptjqueryangularjs
jack
jack

Reputation: 77

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

Upvotes: 0

Views: 38

Answers (4)

Doug Chamberlain
Doug Chamberlain

Reputation: 11351

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

Upvotes: 1

Gourav Garg
Gourav Garg

Reputation: 2911

In your code, as the controller load it will match first condition and will create a function for first part only which you are able to achieve.

Try condition inside the function.

$scope.showPassword= function(){
 //Conditions and logic
}

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222682

It does not work, since you are keeping the function inside a condition, put your condition inside the function,

$scope.showPassword = function(){
  if($scope.password_visible === "password"){
        $scope.password_visible = "text";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-open";  
  }else{
        $scope.password_visible = "password";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-close";
  }
};

DEMO

Upvotes: 0

Michael Westcott
Michael Westcott

Reputation: 480

Can't you just do it like this?

$scope.showPassword = function(){
  if($scope.password_visible === "password"){
        $scope.password_visible = "text";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-open";  
  }else{
        $scope.password_visible = "password";
        $scope.password_glyphicon = "glyphicon glyphicon-eye-close";
  }

};

Upvotes: 0

Related Questions