angularjs checkbox not getting checked

Question

I have the following code in my application:

      <input type="checkbox" ng-checked="vm.eduToEdit.test" />
      {{vm.eduToEdit.test}}
      <input type="checkbox" ng-model="vm.eduToEdit.test">

the value vm.eduToEdit.test is diplaying true or false, but no matter what it returns the checkboes in either input above are not checked. I'm not sure what i'm missing, i thought i shouldn't use ng-model so then I tried ng-checked, but neither has worked so far.

EDIT: I tried the below, but same result:

       <input type="checkbox" ng-checked="vm.eduToEdit.test" /> - 
       <input type="checkbox" ng-checked="checking" /> - 
       {{vm.eduToEdit.test}}
       {{checking}}

In my controller i have:

    vm.eduToEdit.test = true;
    $scope.checking = true;

When I view the page, true is written out, but i never see it checked.

Below is my controller:

(function () {
'use strict';

myModule.controller('EducationController', ["$scope", "bootstrappedData", EducationController]);

function EducationController($scope, bootstrappedData) {
    var vm = this;
    vm.shoppingCart = bootstrappedData.shoppingCart;
    vm.eduToEdit = {};

    vm.EditEducation = function (applicantEducationId, educationTypeId) {
        var owl = $(".owl-carousel");

        var eduFound = $.grep(this.shoppingCart, function (h) {
            return h.ApplicantEducationId === applicantEducationId;
        });
        vm.eduToEdit = eduFound[0];
        vm.eduToEdit.formattedAttendEnd = vm.ConvertToDate(vm.eduToEdit.AttendEnd);
        vm.eduToEdit.formattedAttendStart = vm.ConvertToDate(vm.eduToEdit.AttendStart);
        vm.eduToEdit.formattedGraduationDate = vm.ConvertToDate(vm.eduToEdit.GraduationDate);

        vm.eduToEdit.test = true;
        $scope.checking = true;

        switch (educationTypeId) {
            case 1:
            case 2:
            case 3:
            case 4:
                owl.trigger('to.owl.carousel', [1, 50]);
                break;
            case 5:
                owl.trigger('to.owl.carousel', [3, 50]);
                break;
            case 6:
                owl.trigger('to.owl.carousel', [2, 50]);
                break;
            case 7:
                owl.trigger('to.owl.carousel', [4, 50]);
                break;
            case 9:
                owl.trigger('to.owl.carousel', [5, 50]);
                break;
        }
    };

    vm.ConvertToDate = function (jsonDateToConvert) {
        if (jsonDateToConvert == null)
            return "";
        var value = new Date
        (
             parseInt(jsonDateToConvert.replace(/(^.*\()|([+-].*$)/g, ''))
        );
        return value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
    }
}

})();

Take a look at the documentation docs.angularjs.org/api/ng/directive/ngChecked) Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior. — Alon Eitan
– Alon Eitan, Commented Apr 11, 2016 at 17:52
@AlonEitan the 1st example doesn't use ng-model, shouldn't that work? As the value of test is always true, that comes from the database, i don't understand why the 1st one doesn't get checked then. — Paritosh
– Paritosh, Commented Apr 11, 2016 at 18:13
Don't think it wok that way, maybe ng-click="vm.eduToEdit.test = !vm.eduToEdit.test" instead of ng-checked="vm.eduToEdit.test" will work — Alon Eitan
– Alon Eitan, Commented Apr 11, 2016 at 18:21

Shaishab Roy · Accepted Answer · 2016-04-11 19:09:40Z

1

When you will use ng-checked then it will act as one-way binding means only show checked or unchecked this check box but not changed in controller variable. If you want to change controller variable on change in dom then better to use ng-model to checked or unchecked. can try like:

I guess you used controller as vm in dom and used this in controller.

in html:

<body ng-controller="myCtrl as vm">
    <input type="checkbox" ng-model="vm.eduToEdit.test">{{vm.eduToEdit.test}}
</body>

controller:

angular.module('myApp',[])
.controller("myCtrl", function($scope) {
  var vm = this;
  vm.eduToEdit = {};
  vm.eduToEdit.test = true;
});

DEMO LINK

edited Apr 11, 2016 at 19:09

answered Apr 11, 2016 at 18:25

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Paritosh Over a year ago

Please see my update, i have something similar to what you have, i see it running in your demo, not sure what i'm missing though.

Shaishab Roy Over a year ago

can you share more controller code and html with ng-controller element ?

Shaishab Roy Over a year ago

are you using ng-controller="yourCtrl as vm" ? and some time it happened for digest problem. try to assign in $timeout function for vm.eduToEdit.test = true/false;

Paritosh Over a year ago

yes, i'm using ng-controller="EducationController as vm" i tried putting the checkbox right underneath the div with the ng-controller, thinking maybe it's out of scope, but same issue. i intially thought maybe the true false was coming back as a string, so tried to manually set it, but no luck.

Paritosh Over a year ago

I believe the reason that it's not working might have to do with Bootstrap, we are using a bootstrap switch and it looks like it does not play well with Angular as it requires Jquery, so will look into the angular-bootstrap project

kakurala · Accepted Answer · 2016-04-11 18:25:55Z

0

Click on the second check box to update first, since ng-model is bind with second checkbox whenever you click on it the model value in first checkbox gets updated.

    <input type="checkbox" ng-checked="vm.test" />
    {{vm.test}}
    <input type="checkbox" ng-model="vm.test" />

jsfiddle

edited Apr 11, 2016 at 18:25

answered Apr 11, 2016 at 18:05

kakurala

8346 silver badges15 bronze badges

Collectives™ on Stack Overflow

angularjs checkbox not getting checked

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related