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文件中，输入函数，但在html {{ showPasswordIsChecked }}中没有显示任何内容，就好像变量不存在一样。我该怎么办？

Answer 1

您无法将<img />与ng-model绑定到变量：https://docs.angularjs.org/api/ng/directive/ngModel

您必须在输入（或具有输入行为的元素）上使用它。

但你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

我认为您的代码有效

以下是链接Output

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

在img上的ngModel

3 个答案: