How to have one checkbox checked by default angularjs

Question

How can I have one checkbox checked by default when the page loads between two toggling check boxes. my code:

jsfiddle: http://jsfiddle.net/Lvc0u55v/456/

function MyCtrl($scope) {
    $scope.changeAxis1 = function() {
        if ($scope.thirtyDay) {
                    $scope.wholeTimeline = false;

    }
                };

     $scope.changeAxis2 = function() {
            if($scope.wholeTimeline) {
                    $scope.thirtyDay = false;  

                }
    };
};

view

 <label class='checkboxes' id='checkbox_1'>
        <input type="checkbox" ng-model="thirtyDay" ng-change="changeAxis1()">
        Two
        </label>
         <label class='checkboxes' id='checkbox_2'>
        <input type="checkbox" ng-model="wholeTimeline" ng-change="changeAxis2()">
        One
        </label>

Set model = true for ex. $scope.thirtyDay = true;

Rayon
– Rayon

2016-03-01 10:31:59 +00:00
Commented Mar 1, 2016 at 10:31 — Rayon
– Rayon, Commented Mar 1, 2016 at 10:31
yes I have already tried that it did not work

Imo
– Imo

2016-03-01 10:33:20 +00:00
Commented Mar 1, 2016 at 10:33 — Imo
– Imo, Commented Mar 1, 2016 at 10:33
Fiddle here

Rayon
– Rayon

2016-03-01 10:37:27 +00:00
Commented Mar 1, 2016 at 10:37 — Rayon
– Rayon, Commented Mar 1, 2016 at 10:37

JLRishe · Accepted Answer · 2016-03-01 10:34:55Z

2

Initialize one of the values to true in your controller:

function MyCtrl($scope) {
    $scope.changeAxis1 = function() {
        if ($scope.thirtyDay) {
            $scope.wholeTimeline = false;
        }
    };

    $scope.changeAxis2 = function() {
         if($scope.wholeTimeline) {
            $scope.thirtyDay = false;  
         }
    };

    $scope.thirtyDay = true;
};

You also need to have ng-app and ng-controller in your view in order for Angular to do anything:

<div class="checkbox" ng-app="" ng-controller="MyCtrl">

http://jsfiddle.net/Lvc0u55v/457/

answered Mar 1, 2016 at 10:34

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

Comments

nabin · Accepted Answer · 2016-03-01 10:45:47Z

1

You can use ng-checked="expression"

<input type="checkbox" ng-checked="expression" ng-model="thirtyDay" ng-change="changeAxis1()">
        Two

and put some logic for expression how you want the checkbox to be checked

edited Mar 1, 2016 at 10:45

answered Mar 1, 2016 at 10:39

nabin

6874 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to have one checkbox checked by default angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related