JavaScript/ AngularJS - perform a function when checkbox is selected

Question

I am working on a site that has been written using AngularJS. On one of the pages, there is a button that opens up a 'Page Properties' dialog, that allows the user to change some of the properties of the page that they are currently viewing.

I want to add a checkbox to that dialog, which, when checked will set the current page as the Home page/ default page for the site (i.e. when the user clicks the site logo, or the 'Home' breadcrumb on any given page, it should then take them to the page on which they checked the 'Set as homepage' checkbox, rather than the default home page.

I have added the checkbox to the dialog, and am now just testing it, to see that I can capture whether or not it has been checked correctly, before I actually write the function to actually set the Home page to the user's choice, rather than the default.

The Angular markup for the dialog box is:

<form class="modal-body" role="form" data-ng-submit="confirm($event)" novalidate>
    ...
    <div data-ng-show="layout.style === 'grid'">
        ...
        <div class="divider"></div>
        <div class="row checkbox">
            <label class="col-sm-2" data-i18n="Homepage:"></label>
            <div class="col-sm-10 checkbox">
                <label class="checkbox">
                    <input name="homepageCheckbox" type="checkbox"
                        ng-click="layout.direction='row'"
                        ng-clicked="layout.direction==='row'">
                    <span data-18n="Set this page as the home page"></span>
                </label>
            </div>
        </div>
    ...

This markup displays the checkbox correctly- when I click the button to open the dialog box, I can see that the checkbox I've added is displayed with it's label and text alongside it, & I am able to select/ deselect it.

I am now starting to look into writing the JS required to actually change the home page to the selected page when the checkbox is selected, and thought I would start doing this by simply making sure I am correctly capturing whether or not the checkbox is selected.

To do this, I have located the JS function that is handling the dialog box, and added a few console.log() lines to it, to try and display the value of the checkbox at a given time:

.controller('PageLayoutPickerCtrl', function($scope, $route, $location, $timeout, Page, umConf, NotifyMgr, DialogMgr) {
    if($scope.homepageCheckbox == 'true'){
        console.log("homepageCheckbox is selected");
    } else {
        console.log("hompageCheckbox is not selected");
    }
    ...
    $scope.confirm = function(e) {
        ...
        if($scope.homepageCheckbox == 'true') {
            console.log("homepageCheckbox is selected inside $scope.confirm() = function()");
        } else {
            console.log("hompageCheckbox is not selected inside $scope.confirm() = function()");
        }
    };
    ...
})

So, due to where I've placed the console.log() statements, when the button is clicked to display the dialog, a statement should be shown in the console stating whether or not the checkbox is selected as soon as the dialog opens, and another statement should be shown in the console stating whether or not the checkbox is selected as soon as the 'Confirm' button is pressed on the dialog box.

At the moment, both of these console.log() statements are showing that the checkbox is not selected, regardless of whether I have actually selected it or not.

How can I capture the value of the checkbox correctly, so that when it is selected, and the user clicks the 'Confirm' button, I can change the Home page of the website to the current page?

Agree with @NathanP. In a comment the above is the answer ;) — lealceldeiro
– lealceldeiro, Commented Jul 6, 2017 at 13:38

lealceldeiro · Accepted Answer · 2017-07-06 13:36:53Z

1

You should use ng-model in your checkbox like this:

html

...
<label class="checkbox">
   <input name="homepageCheckbox" type="checkbox"
          ng-model="checkBoxModel"
          ng-click="layout.direction='row'"
          >
    <span data-18n="Set this page as the home page"></span>
</label>
...

js

...
    $scope.confirm = function(e) {
        ...
        if($scope.checkBoxModel) {
            console.log("homepageCheckbox is selected inside $scope.confirm() = function()");
        } else {
            console.log("hompageCheckbox is not selected inside $scope.confirm() = function()");
        }
    };
...

answered Jul 6, 2017 at 13:36

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

Comments

Wasif Khan · Accepted Answer · 2017-07-06 13:37:13Z

1

<input name="homepageCheckbox" type="checkbox" ng-model="homepageCheckbox"
                    ng-click="layout.direction='row'"
                    ng-clicked="layout.direction==='row'">

put ng-model="homepageCheckbox" and you are good to go, then in your controller, check this:

if($scope.homepageCheckbox){
    console.log("Checkbox is selected");
}
else{
    console.log("Checkbox is not selected");
}

answered Jul 6, 2017 at 13:37

Wasif Khan

9547 silver badges25 bronze badges

Collectives™ on Stack Overflow

JavaScript/ AngularJS - perform a function when checkbox is selected

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