Угловое js не срабатывает событие изменения на уже установленном флажке.

Пожалуйста, ознакомьтесь с этим fiddle here. Я получаю это странное поведение от углового события изменения на первоначально проверенном chekbox. Я проверил это, используя jquery. Событие jquery срабатывает должным образом, пока угловое событие срабатывает только тогда, когда предварительно установленный флажок снят.Угловое js не срабатывает событие изменения на уже установленном флажке.

Вот мой полный код КСТАТИ:

<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-check с ng-model, https://docs.angularjs.org/api/ng/directive/ngChecked –

Удалены ng-checked атрибут, изменен тип $scope.formElem.checkbox, исправить, если заявление ($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' только 1 направленный, он будет показывать, будет ли значение проверено, но не будет связывать его. 2 путь к области –

Делает смысл , Спасибо. – 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 и сделать это со всеми угловыми. Также в контроллере, если вы хотите увидеть изменение, используйте $scope.$watch. Ее demo.

источник

2015-08-30 16:03:59

Угловое js не срабатывает событие изменения на уже установленном флажке.

ответ

Смежные вопросы