CODEWITHSUNDEEP
javascriptangularjs
Paritosh
Paritosh

Reputation: 4503

angularjs checkbox not getting checked

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();
    }
}

})();

Upvotes: 1

Views: 3592

Answers (2)

Shaishab Roy
Shaishab Roy

Reputation: 16805

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

Upvotes: 1

kakurala
kakurala

Reputation: 824

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

Upvotes: 0

Related Questions