Блог

Главная - Вопросы по программированию - Невозможно повторно вызвать угловую функцию на основе условий

Невозможно повторно вызвать угловую функцию на основе условий

#javascript #jquery #angularjs

#javascript #jquery #angularjs

Вопрос:

Идея заключается:
Часть 1: Нажать кнопку закрытия глаз: И повернуть кнопку закрытия глаз в положение открытия глаз. И покажите пароль.

Часть 2: Нажать кнопку «Открыть глаза»: И повернуть кнопку «Открыть глаза» в положение «Закрыть глаза». И скрыть пароль.

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

        };

    }

Проблема в том, что как только я нажимаю кнопку и вызываю функцию и выполняю часть 1, я не могу выполнить часть 2

Пожалуйста, посоветуйте

Ответ №1:

Вот рабочий план. Если вы манипулируете css в своем контроллере, вы делаете что-то неправильно. Это совершенно неугловое.

 <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

Ответ №2:

Разве вы не можете просто сделать это вот так?

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

};

Ответ №3:

Это не работает, поскольку вы сохраняете функцию внутри условия, поместите свое условие внутри функции,

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

ДЕМОНСТРАЦИЯ

Ответ №4:

В вашем коде при загрузке контроллера он будет соответствовать первому условию и создаст функцию только для первой части, которую вы сможете выполнить.

Попробуйте выполнить условие внутри функции.

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