通过javascript选择输入复选框时未触发ng-show

Question

I have an html page where clicking on a checkbox causes a new section of the page to become visible. The HTML looks like this:

            <input id="formcheck" ng-model="collapseform" type="checkbox">Fill in the Test Form         
            <div id="mainformdiv" class="wizard-div" ng-show="collapseform">                
                    <div>                           
                        <div class="main-block">    
                                ...and so on
                        </div>
                    </div>
            </div>

This part works fine - by default that part of the page is hidden, and when I select the checkbox, the rest of the page appears. When I deselect it, the rest of the page is hidden again.

Further down on that same page there is a table, and when you select a node in that table it calls a controller function that causes some internal values to be set - this part works as well, so the controller seems to be set up correctly and all the functions can be called.

The problem I'm seeing is this: I want to add a bit to the controller function that gets called when the table node is selected, and what I want it to do is, in addition to setting the internal values (which it does correctly), also check the checkbox, and cause the hidden part of the page to be displayed in response. I thought if I checked the checkbox through the javascript that would accomplish this, so I added this to the internal value setting function:

        if (document.getElementById("formcheck").checked == false) {
            document.getElementById("formcheck").checked = true;
        }

That kind of works - the checkbox does get checked off when that piece of code is called, however, unlike when I click the checkbox with a mouse, it does not seem to trigger the ng-show, and so the hidden part of the page is not made visible. Is there something else I need to do in order to make this work?

Thanks!

Answer 1

You should be able to change the value of the model. Since NgModel provides two-way binding, it watches the $scope variable as well.

For example do

$scope.collapseform = false

instead of

if (document.getElementById("formcheck").checked == false) {
    document.getElementById("formcheck").checked = true;
}