AngularJS checkbox- how to set its boolean value?

Question

I am using AngularJS to write the front-end of my website, and currently have a number of widgets displayed on a particular page. I am looking to add the functionality to hide the widget heading based on whether or not the user has selected a particular checkbox on a dialog box that is opened when they click one of the buttons on a widget.

The HTML for this checkbox is:

<div data-ng-if="widget.name === 'umw-tag-box'" ng-hide="hideWidgetHeading()">
    ...
    <div class="divider"></div>
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" name="noWidgetHeading" ng-true-value="true" ng-false-value="false" ngChange="hideWidgetHeading()">
                <span></span>
            </label>
        </div>
    </div>
</div>

The JS is called when the 'Preview' button is clicked on the dialog box:

var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
//if(widgetHeadingCheckbox == true){
console.log("Value of widgetHeadingCheckbox: ", widgetHeadingCheckbox);
if(widgetHeadingCheckbox){
    console.log("if(widgetHeadingCheckbox) statement entered ");
    hideWidgetHeading();
} else {
    console.log("else of if(widgetHeadingCheckbox) statement entered ");
    hideWidgetHeading();
}

$scope.preview = function(e) {
    function hideWidgetHeading(){
        if(widgetHeadingCheckbox){
            console.log("hideWidgetHeading() called (Widget/ctrl.js line 501) ");
            console.log("Value of widgetHeadingCheckbox (should be true): ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        } else {
            console.log("hideWidgetHeading() called (Widget/ctrl.js line 501) ");
            console.log("Value of widgetHeadingCheckbox (should be false): ", widgetHeadingCheckbox);
            return widgetHeadingCheckbox;
        }
    }
    $timeout(function() { previewDisabled = false; }, 500);
};

At the moment, regardless of whether the checkbox is checked or not, when I click the 'Preview' button on the dialog box, the console is displaying the message:

Value of widgetHeadingCheckbox (should be false): null

which tells me that the widgetHeadingCheckbox variable is either not being set correctly, or it's taking the value of the checkbox when the checkbox is declared, but not initialised (i.e. null), and is not being updated when any changes are made to the value of the checkbox...

What is the best way to ensure that my JS function always holds the correct value of the HTML checkbox element, and is updated any time any changes are made to the element in the HTML?

Edit

So, having done a bit more research, I finally came across AngularJS' $scope.$watch() which is, it seems, how to add an 'event listener' for a change in the value of the checkbox.

I tried adding the following code beneath the declaration of the widgetHeadingCheckbox variable that I am using to get the HTML checkbox element:

var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
console.log(widgetHeadingCheckbox);
if(widgetHeadingCheckbox){
    hideWidgetHeading();
} else {
    hideWidgetHeading()
}

function hideWidgetHeading(){
    if(widgetHeadingCheckbox){
        console.log("Value of checkbox in if(): ", widgetHeadingCheckbox);
        return widgetHeadingCheckbox;
    } else {
        $scope.$watch('widgetHeadingCheckbox', function(){
            console.log("Value of checkbox has changed inside $watch() ", widgetHeadingCheckbox);
        }, true)
        return widgetHeadingCheckbox;
    }
}

But, when I load the page, click the button that opens the dialog box, select the checkbox (so that its value is checked/ true), and click the 'Preview' button on the dialog box, the console displays the output:

Value of checkbox has changed (inside $watch() null

I also found that I shouldn't be using quotes in the HTML for the true/ false values of the checkbox, so changed that to:

<div class="col-sm-8 col-xs-6">
    <label class="ui-checkbox">
        <input type="checkbox" name="noWidgetHeading" ng-true-value= true ng-false-value= false ngChange="hideWidgetHeading()" ng-click="hideWidgetHeading()" ng-model="checkboxModel">
        <span></span>
    </label>
</div>

So it would seem that the checkbox is never actually being given a true/ false value... Why is this? How can I set it in order to use it in the JS function?

I've edited my post to show attempts at solving the problem. — Noble-Surfer

ASLAM TP ASLAM TP · Accepted Answer · 2017-07-18T11:58:44

when you use ng-if, it acts like a child. So the you should access it like $parrent.foo...

AngularJS checkbox- how to set its boolean value?

1 Answers