ngМодель на img

Question

Я пытаюсь сделать что-то легкое, но это не сработает. У меня есть этот HTML

<div class="positionDiv"> 
    <img class="eyes" ng-model="showPasswordIsChecked" ng-click="afficherMdp()" ng-controller="creationCompteController" src="images/eye.png" /> 
</div> 
{{ showPasswordIsChecked }} 

и этот JavaScript

angular.module('starter').controller('creationCompteController',[ 
    '$scope', 
    function ($scope) 
    { 


     $scope.showPasswordIsChecked = false; 


     //Affichage du template html 
     $scope.afficherMdp = function() 
     { 
      if($scope.showPasswordIsChecked==true) 
      { 
       $scope.showPasswordIsChecked=false; 
       alert($scope.showPasswordIsChecked); 
      }else{ 
       $scope.showPasswordIsChecked=true; 
       alert($scope.showPasswordIsChecked); 
      } 

     } 

    }]); 

Я хочу, когда я нажимаю на мое изображение, чтобы изменить значение showPassword к истинным или ложным. В js-файле вводится функция, но в html {{ showPasswordIsChecked }} ничего не отображается, как будто переменная не существует. Как я могу, пожалуйста?

Answer 1

Вы не можете связать <img /> переменной с ng-model: https://docs.angularjs.org/api/ng/directive/ngModel

Вы должны использовать его на входе (или элемент с поведением вход).

Но вы можете сделать так:

angular.module('test', []).controller('creationCompteController', function($scope) { 
 
    $scope.showPasswordIsChecked = false; 
 
});

#my-checkbox { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="test"> 
 
    <div ng-controller="creationCompteController"> 
 
     <label for="my-checkbox"> 
 
      <input id="my-checkbox" type="checkbox" ng-model="showPasswordIsChecked" /> 
 
      <img src="http://icons.iconarchive.com/icons/custom-icon-design/mono-general-4/128/eye-icon.png" /> 
 
     </label> 
 
    
 
     {{ showPasswordIsChecked }} 
 
    </div> 
 
</div>

Answer 2

Вот демо http://dojo.telerik.com/OjaPa Вы печатаете модель из области видимости контроллера, так что это происходит Пожалуйста, проверьте, является ли это полезно или нет

<div ng-controller='creationCompteController'> 
    <div class="positionDiv"> 
    <img class="eyes" ng-model='showPasswordIsChecked' ng-click="afficherMdp()" src="images/eye.png" /> 
</div> 
{{ showPasswordIsChecked }} 
</div> 

Надеюсь, что это может быть hel ты.

Answer 3

Я думаю, что Ваш код работает

Вот ссылка Output

$scope.afficherMdp = function() 
    { 
     if($scope.showPasswordIsChecked==true) 
     { 
      $scope.showPasswordIsChecked=false; 
      alert($scope.showPasswordIsChecked); 
     }else{ 
      $scope.showPasswordIsChecked=true; 
      alert($scope.showPasswordIsChecked); 
     } 
    }