img 上的 ngModel

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 的值更改为 true 或 false。在js文件中，函数中的enter，但是在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>

希望对您有所帮助。

Answer 3

我认为你的代码有效

这里是LinkOutput

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

img 上的 ngModel

ngModel on a img

javascript

angularjs

angular-ngmodel