Calling a function onclick in AngularJs

Question

My code has following structure:

main.html - loads all modules - declares ng-app and main controller - contains div tag-load-div
file1.html ... (all other html files) - contain only <div> / child tags and are loaded into a load-div which is in main.html on events such as click

now in one such file say file3.html, I have a checkbox. onclick of that checkbox I want to open a modal window - a form that will be submitted. Now here is my code

file3.html

    <div>
        <input type="checkbox" name="your-group" value="unit-in-group" onclick="toggleModal();"/>Unit-in-group
        <modal title="some title" visible="showModal">
            <form role="form">
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" />
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </modal>
    </div>

now I have written follwing code in the main main controller declared in main.hml

$scope.showModal = false;
  $scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
 };

The expected behaviour is when my file3 is loaded I will see a check box on the screen and as I click it, it will open a modal window but instead I see modal form fields on the same page where I see checkbox. and when I click it I get angular exception that showModal is not defined.

Where am I going wrong?

Tyler · Accepted Answer · 2016-04-12 20:21:08Z

8

Just need to use Angular syntax: ng-click for the click and ng-show for the visibility.

 <input type="checkbox" name="your-group" value="unit-in-group" ng-click="toggleModal();"/>Unit-in-group
 <modal title="some title" ng-show="showModal">

Other options:

You could also use ng-change instead of ng-click, which in this case wouldn't make much difference.

Or you could use ng-model (ng-model="showModal") and get rid of your toggle function entirely Example.

edited Apr 12, 2016 at 20:21

answered Apr 12, 2016 at 16:57

Tyler

11.5k10 gold badges72 silver badges107 bronze badges

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

Comments

Andy · Accepted Answer · 2020-04-22 17:33:14Z

5

I had a similar problem.

To detect a click use Angular syntax: (click)="toggleModal();"

<input type="checkbox" name="your-group" value="unit-in-group" (click)="toggleModal();"/>

I hope this helps.

answered Apr 22, 2020 at 17:33

Andy

1011 silver badge3 bronze badges

Comments

Sarantis Tofas · Accepted Answer · 2016-04-12 17:24:48Z

1

Another approach would be to use the ngChange directive to detect that the checkbox got checked

<input type="checkbox" name="your-group" value="unit-in-group" ng-change="toggleModal();"/>

Code for modal remains the same as the other answer suggested

 <modal title="some title" ng-show="showModal">

edited Apr 12, 2016 at 17:24

answered Apr 12, 2016 at 17:08

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

Collectives™ on Stack Overflow

Calling a function onclick in AngularJs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related