CODEWITHSUNDEEP
javascriptangularjscheckbox
Pevara
Pevara

Reputation: 14310

Angular checkboxes disapear on select

I have a list of checkboxes in my app:

<div class="col-md-6" ng-repeat="item in segment.items">
    <div class="checkbox">
        <label>
            <input 
              type="checkbox" 
              ng-model="item" 
              ng-checked="item.enabled" 
              value="{{item.id}}" 
              class="segment-visibility-checkbox" 
            />
               {{item.name}} <code>/ {{item.slug}}</code>
        </label>
    </div>
</div>

The data, that exists on the $scope as segment.items, looks something like this:

[
    {"id":1,"slug":"nl","name":"Dutch","enabled":true},
    {"id":4,"slug":"en","name":"English","enabled":false},   
    {"id":2,"slug":"fr","name":"French","enabled":true},    
    {"id":3,"slug":"de","name":"German","enabled":false}
]

This renders fine on load, and the correct checboxes are checked. However, if I select a checkbox, the label disappears and the binding appears to be lost. If I deselect a checkbox, it seems to work fine, but if I select it again, it disappears as well. No errors show up in the console.

This is what it looks like on load: enter image description here

And as soon as I click on "English" I get this enter image description here

I'm new to Angular so I suspect I am doing something obvious wrong. Can anybody please point me in the right direction?

Upvotes: 1

Views: 1726

Answers (2)

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11398

pointing your ng-model to ng-model="item" will cast your item into a boolean.
Also, you should not use ng-model with ng-checked : https://docs.angularjs.org/api/ng/directive/ngChecked

what you should do is the following :

        <input 
          type="checkbox" 
          ng-model="item.enabled" 
          value="{{item.id}}" 
          class="segment-visibility-checkbox" 
        />

Upvotes: 2

DonJuwe
DonJuwe

Reputation: 4563

You need to bind the ng-model directly on your enabled boolean attribute:

<input 
    type="checkbox" 
    ng-model="item.enabled"
    value="{{item.id}}" 
    class="segment-visibility-checkbox" 
/>


var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.segment = {
    	items: [
            {"id":1,"slug":"nl","name":"Dutch","enabled":true},
            {"id":4,"slug":"en","name":"English","enabled":false},   
            {"id":2,"slug":"fr","name":"French","enabled":true},    
            {"id":3,"slug":"de","name":"German","enabled":false}
        ]
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  
  {{segment.items}}
  
  <div class="col-md-6" ng-repeat="item in segment.items">
    <div class="checkbox">
      <label>
        <input
          type="checkbox" 
          ng-model="item.enabled"
          value="{{item.id}}" 
          class="segment-visibility-checkbox" 
      />
      {{item.name}} <code>/ {{item.slug}}</code>
      </label>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions