mardi 5 juillet 2016

Angular ngChecked by default true, prevents change/click event?

I want to understand the behavior of the below code segment.

Expected :

When you click on a check box it should add an attribute in myData (val3/val4) with the value same as the checkbox's.

Actual :

When you check the 2nd check box its working fine, but when you uncheck the 1st, it does not insert val3 with false value. It only inserts val3 when checked again.

angular.module('myApp', [])
  .controller('MyController', ['$scope',
    function($scope) {
      $scope.myData = {
        val1: true,
        val2: false
      };
    }
  ]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
  <form ng-controller="MyController">
    MyData : 
    <br/>
    <label>Val1:
      <input type="checkbox" 
             ng-checked="myData.val1" 
             ng-model="myData.val3">
    </label><br/>
    <label>Val2:
      <input type="checkbox" 
             ng-checked="myData.val2" 
             ng-model="myData.val4">
    </label><br/>

    val1 = <br/>
    val2 = <br/>
    val3 = <br/>
    val4 = <br/>
  </form>
</div>

Why such a behavior ?




Aucun commentaire:

Enregistrer un commentaire