角度js不會觸發已檢查的複選框上的更改事件

請檢查此fiddle here。我從最初選中的chekbox上的變化事件角度得到這個奇怪的行爲。我也使用jquery進行了檢查。 jquery事件正確觸發，而角度事件只有在最初未選中檢查時觸發。角度js不會觸發已檢查的複選框上的更改事件

這裏是我完整的代碼BTW：

<html ng-app="testing"> 
<head> 
    <title>Angular ng-change test</title> 
</head> 
<body> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <div class="row" ng-controller="ChgCtrl"> 
     <div class="col-md-12"> 
      <form> 
       <div class="form-group"> 
        <span class="text-info">ng-change</span> 
        <input type="checkbox" ng-model="formElem.checkbox" ng-change="toggleChange(formElem.checkbox)" ng-checked="formElem.checkbox == 1"/> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-12">    
      <div class="col-md-6"> 
       <h3>JQuery change event:</h3> 
       <P id="jq-messages"></p> 
      </div>   
      <div class="col-md-6">      
       <h3>Angular change event:</h3> 
       <p>{{message_change}}</p> 
      </div> 
      <p class="text-danger">Please note the first click on checkbox.</p> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     var app = angular.module('testing', []); 
     app.controller('ChgCtrl', function ($scope) { 
      $scope.formElem = { 
       checkbox: 1 
      }; 
      $scope.message_change = ''; 

      $scope.toggleChange = function (data) { 
       $scope.message_change = data === true ? 'Checked' : 'Unchecked'; 
       console.info(data === true ? 'Checked' : 'Unchecked'); 
      }; 
     }); 

     $(function() { 
      $('input[type=checkbox]').on('change', function (e) { 
       $('#jq-messages').html($(this).is(':checked') ? 'Checked' : 'Unchecked'); 
       console.log($(this).is(':checked')); 
      }); 
     }); 
    </script> 
</body>

來源

2015-08-30 ioesandeep

爲什麼使用jQuery？ –

你不應該在ng-model中使用ng-checked指令，https://docs.angularjs.org/api/ng/directive/ngChecked –

刪除ng-checked屬性，改變類型的$scope.formElem.checkbox，if語句($scope.formElem.checkbox ? 'Checked' : 'Unchecked')

var app = angular.module('testing', []); 
 
     app.controller('ChgCtrl', function ($scope) { 
 
      $scope.formElem = { 
 
       checkbox: true 
 
      }; 
 
      $scope.message_change = ''; 
 

 
      $scope.toggleChange = function (data) { 
 
       $scope.message_change = ($scope.formElem.checkbox ? 'Checked' : 'Unchecked'); 
 
       console.info(data === true ? 'Checked' : 'Unchecked'); 
 
      }; 
 
     }); 
 

 
     $(function() { 
 
      $('input[type=checkbox]').on('change', function (e) { 
 
       $('#jq-messages').html($(this).is(':checked') ? 'Checked' : 'Unchecked'); 
 
       console.log($(this).is(':checked')); 
 
      }); 
 
     });

<body ng-app="testing"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <div class="row" ng-controller="ChgCtrl"> 
 
     <div class="col-md-12"> 
 
      <form> 
 
       <div class="form-group"> 
 
        <span class="text-info">ng-change</span> 
 
        <input type="checkbox" ng-model="formElem.checkbox" ng-change="toggleChange(formElem.checkbox)" /> 
 
       </div> 
 
      </form> 
 
     </div> 
 
     <div class="col-md-12">    
 
      <div class="col-md-6"> 
 
       <h3>JQuery change event:</h3> 
 
       <P id="jq-messages"></p> 
 
      </div>   
 
      <div class="col-md-6">      
 
       <h3>Angular change event:</h3> 
 
       <p>{{message_change}}</p> 
 
      </div> 
 
      <p class="text-danger">Please note the first click on checkbox.</p> 
 
     </div> 
 
    </div> 
 
</body>

修正

ng-change顧名思義，事件處理器會觸發目標值更改，但您只是初始化值而不更改它們

來源

2015-08-30 15:39:28

你的解決方案確實有效。謝謝。我的方法存在的問題是我使用了ng-checked屬性？如果是這樣的話，我不應該使用它嗎？ – ioesandeep

你已經有'ng-model'屬性，它是一個綁定，並且足夠聰明，'ng-checked'只有一個方向，它會顯示是否檢查了值但不會綁定它到範圍的兩種方式 –

有意義。謝謝。 – ioesandeep

您可以使用純角度來做到這一點 - 不需要jQuery。

刪除您ng-change和ng-checked屬性而只使用ng-model：

<input type="checkbox" ng-model="formElem.checkbox"/>

然後用ng-show切換你的文字和模型：

<p ng-show="formElem.checkbox">checked!</p> 
<p ng-show="!formElem.checkbox">not checked.</p>

Demo

來源

2015-08-30 15:44:37

我的建議是不要用JQuery和所有angularJS做。如果您想查看更改，請在控制器中使用$scope.$watch。她是demo。

來源

2015-08-30 16:03:59

角度js不會觸發已檢查的複選框上的更改事件

回答

相關問題